@rnmapbox/maps 10.0.0-beta.64 → 10.0.0-beta.66

package/ios/RCTMGL-v10/RCTMGLMarkerView.swift

@@ -1,6 +1,36 @@
 import MapboxMaps
 import UIKit
 
+/// dummy parent of RCTMGLMarkerView, so react-native changes visibility on RCTMGLMarkerView,
+/// and Mapbox changes visibility on RCTMGLMarkerViewParentViewAnnotation
+class RCTMGLMarkerViewParentViewAnnotation : UIView {
+  required init(marker: RCTMGLMarkerView) {
+    super.init(frame: marker.bounds)
+    insertSubview(marker, at: 0)
+  }
+  
+  required init?(coder: NSCoder) {
+    fatalError("not implented")
+  }
+
+  func remove(marker: RCTMGLMarkerView) {
+    marker.removeFromSuperview()
+  }
+
+  func updateSize(_ size: CGSize, oldOffset: CGVector, newOffset: CGVector) {
+    let actSize = self.frame.size
+    if actSize.width != size.width || actSize.height != size.height {
+      let dx = ((size.width/2.0) - newOffset.dx) - ((actSize.width/2.0) - oldOffset.dx)
+      let dy = ((size.height/2.0) + newOffset.dy) - ((actSize.height/2.0) + oldOffset.dy)
+      print(" => size=\(size) actSize=\(actSize) newOffset=\(newOffset) oldOffset=\(oldOffset)  dx=\(dx) dy=\(dy)")
+      var frame = self.frame
+      frame = frame.offsetBy(dx: -dx, dy: -dy)
+      frame.size = size
+      self.frame = frame
+    }
+  }
+}
+
 class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
   // MARK: - Instance variables
   
@@ -8,6 +38,7 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
   let id: String = "marker-\(UUID().uuidString)"
   
   weak var map: RCTMGLMapView?
+  weak var _annotationView: RCTMGLMarkerViewParentViewAnnotation?
   
   var didAddToMap = false
   
@@ -31,13 +62,7 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
   
   @objc var isSelected: Bool = false {
     didSet {
-      let hasBecomeSelected = isSelected && !oldValue
-      
-      if hasBecomeSelected {
-        setSelected()
-      } else {
-        update()
-      }
+      update()
     }
   }
 
@@ -89,36 +114,33 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
   
   // MARK: - React methods
   
+  override var isHidden: Bool {
+    get {
+      return super.isHidden
+    }
+    set {
+      super.isHidden = newValue
+    }
+  }
+  
   override func reactSetFrame(_ frame: CGRect) {
     let prev = self.frame
     var next = frame
     
     let frameDidChange = !next.equalTo(prev)
-    if (frameDidChange) {
-      if prev.minX == 0 || prev.minY == 0 {
-        // Start the view offscreen to make it invisible until the annotation manager sets it to
-        // the correct point on the map.
-        next = CGRect(
-          x: -10000,
-          y: -10000,
-          width: next.width,
-          height: next.height
-        )
-      } else {
-        // Calculate the next position to temporarily place the view before the annotation manager
-        // sets it to the correct point on the map.
-        let dx = (next.width - prev.width) / 2
-        let dy = (next.height - prev.height) / 2
-        next = CGRect(
-          x: prev.minX - dx,
-          y: prev.minY - dy,
-          width: next.width,
-          height: next.height
-        )
-      }
+    if frameDidChange {
+      next = CGRect(
+        x: 0,
+        y: 0,
+        width: next.width,
+        height: next.height
+      )
     }
-    
+
     super.reactSetFrame(next)
+    if frameDidChange {
+      annotationView.updateSize(next.size, oldOffset:calcOffset(size: prev.size), newOffset: calcOffset(size: next.size))
+    }
     addOrUpdate()
   }
   
@@ -156,7 +178,7 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
 
     do {
       let options = getOptions()
-      try annotationManager.add(self, id: id, options: options)
+      try annotationManager.add(annotationView, id: id, options: options)
       didAddToMap = true
     } catch {
       Logger.log(level: .error, message: "[MarkerView] Error adding annotation", error: error)
@@ -174,27 +196,17 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
     
     do {
       let options = getOptions()
-      try annotationManager.update(self, options: options)
+      try annotationManager.update(annotationView, options: options)
     } catch {
       Logger.log(level: .error, message: "[MarkerView] Error updating annotation", error: error)
     }
   }
   
-  /// There is a Mapbox bug where `selected` does not cause the marker to move to the front, so we can't simply update the component.
-  /// This forces that effect. See https://github.com/mapbox/mapbox-maps-ios/issues/1599.
-  private func setSelected() {
-    if let options = annotationManager?.options(for: self) {
-      do {
-        annotationManager?.remove(self)
-        try annotationManager?.add(self, id: id, options: options)
-      } catch {
-        Logger.log(level: .error, message: "[MarkerView] Error selecting annotation", error: error)
-      }
-    }
-  }
-  
   private func remove() {
-    annotationManager?.remove(self)
+    annotationManager?.remove(annotationView)
+    annotationView.remove(marker: self)
+    self._annotationView = nil
+    didAddToMap = false
   }
   
   // MARK: - Helper functions
@@ -205,29 +217,49 @@ class RCTMGLMarkerView: UIView, RCTMGLMapComponent {
       geometry = Geometry.point(point)
     }
     
-    let offset = getOffset()
+    let size = self.bounds.size
+    let offset = calcOffset(size: size)
   
     let options = ViewAnnotationOptions(
       geometry: geometry,
-      width: self.bounds.width,
-      height: self.bounds.height,
+      width: size.width,
+      height: size.height,
       allowOverlap: allowOverlap,
       offsetX: offset.dx,
-      offsetY: offset.dy
+      offsetY: offset.dy,
+      selected: isSelected
     )
     return options
   }
   
-  private func getOffset() -> CGVector {
+  private func calcOffset(size: CGSize) -> CGVector {
     guard let anchor = anchor, let anchorX = anchor["x"]?.CGFloat, let anchorY = anchor["y"]?.CGFloat else {
       return .zero
     }
           
-    // Create a modified offset, normalized from 0..1 to -1..1 and scaled to
-    // the view size.
-    let x = (anchorX * 2 - 1) * (self.bounds.width / 2) * -1
-    let y = (anchorY * 2 - 1) * (self.bounds.height / 2)
+    let x = (anchorX * 2 - 1) * (size.width / 2) * -1
+    let y = (anchorY * 2 - 1) * (size.height / 2)
 
     return CGVector(dx: x, dy: y)
   }
+  
+  var annotationView : RCTMGLMarkerViewParentViewAnnotation {
+    if let result = _annotationView {
+      return result
+    }
+    let result = RCTMGLMarkerViewParentViewAnnotation(marker: self)
+    _annotationView = result
+    return result
+  }
+
+  @objc override func didMoveToSuperview() {
+    // React tends to add back us to our original superview,
+    // https://github.com/facebook/react-native/blob/11ece22fc6955d169def9ef9f2809c24bc457ba8/React/Views/UIView%2BReact.m#L172-L177
+    // fix that if we see that
+    if let expectedParent = _annotationView {
+      if superview != nil && superview != expectedParent {
+        expectedParent.addSubview(self)
+      }
+    }
+  }
 }

package/ios/RCTMGL-v10/RCTMGLOfflineModule.swift

@@ -11,10 +11,14 @@ extension Date {
   }
 }
 
+
+
 @objc(RCTMGLOfflineModule)
 class RCTMGLOfflineModule: RCTEventEmitter {
   var hasListeners = false
   
+  static let RNMapboxInfoMetadataKey = "_rnmapbox"
+
   enum Callbacks : String {
     case error = "MapboOfflineRegionError"
     case progress = "MapboxOfflineRegionProgress"
@@ -37,15 +41,78 @@ class RCTMGLOfflineModule: RCTEventEmitter {
   }()
   
   struct TileRegionPack {
+    init(name: String, state: State = .unknown, progress: TileRegionLoadProgress? = nil, metadata: [String:Any]) {
+      self.name = name
+      self.progress = progress
+      self.metadata = metadata
+      self.state = state
+
+      if let rnMetadata = metadata[RNMapboxInfoMetadataKey] as? [String:Any] {
+        if let styleURI = rnMetadata["styleURI"] as? String {
+          self.styleURI = StyleURI(rawValue: styleURI)
+        }
+        if let bounds = rnMetadata["bounds"] as? JSONObject {
+          self.bounds = logged("RCTMGLOfflineModule.TileRegionPack: cannot decode bounds") {
+            let jsonData = try JSONSerialization.data(withJSONObject: bounds)
+            return try JSONDecoder().decode(Geometry.self, from: jsonData)
+          }
+        }
+        if let zoomRange = rnMetadata["zoomRange"] as? JSONObject {
+          self.zoomRange = logged("RCTMGLOfflineModule.TileRegionPack: cannot decode zoomRange") {
+            let jsonData = try JSONSerialization.data(withJSONObject: zoomRange)
+            return try JSONDecoder().decode(ClosedRange<UInt8>.self, from: jsonData)
+          }
+        }
+      }
+    }
+    
+    init(name: String,
+         state: State = .unknown,
+         styleURI: StyleURI,
+         bounds: Geometry,
+         zoomRange: ClosedRange<UInt8>,
+         metadata: [String:Any]) {
+      self.name = name
+      self.progress = nil
+      self.cancelable = nil
+      self.state = state
+      
+      self.styleURI = styleURI
+      self.bounds = bounds
+      self.zoomRange = zoomRange
+      
+      var metadata = metadata
+      metadata[RNMapboxInfoMetadataKey] = [
+        "styleURI": styleURI.rawValue,
+        "bounds": logged("RCTMGLOfflineModule.TileRegionPack: cannot encode bounds") { try JSONSerialization.jsonObject(with: try! JSONEncoder().encode(bounds)) },
+        "zoomRange": logged("RCTMGLOfflineModule.TileRegionPack: cannot encode zoomRange") { try JSONSerialization.jsonObject(with: try! JSONEncoder().encode(zoomRange))}
+      ]
+      self.metadata = metadata
+    }
+
     var name: String
     var cancelable: Cancelable? = nil
     var progress : TileRegionLoadProgress? = nil
     var state : State = .inactive
     var metadata : [String:Any]? = nil
+
+      // Stored in metadata for resume functionality:
+    var bounds: Geometry? = nil
+    var zoomRange: ClosedRange<UInt8>? = nil
+    var styleURI: StyleURI? = nil
   }
   
   lazy var tileRegionPacks : [String: TileRegionPack] = [:]
   
+  var progressEventThrottle : (
+    waitBetweenEvents: Double?,
+    lastSentTimestamp: Double?,
+    lastSentState: State?
+  ) = (
+    300,
+    nil,
+    nil
+  )
   
   @objc override
   func startObserving() {
@@ -107,7 +174,7 @@ class RCTMGLOfflineModule: RCTEventEmitter {
       if let expires = region.expires {
         result["expires"] = expires.toJSONString()
       }
-      
+
       result["metadata"] = String(data:try! JSONSerialization.data(withJSONObject: metadata, options: [.prettyPrinted]), encoding: .utf8)
       
       result["bounds"] = jsonBounds
@@ -173,9 +240,9 @@ class RCTMGLOfflineModule: RCTEventEmitter {
         let ret = self.convertRegionToJSON(region: region, geometry: geometry, metadata: metadata)
         var pack = self.tileRegionPacks[region.id] ?? TileRegionPack(
           name: region.id,
-          progress: self.toProgress(region: region),
           state: .unknown,
-          metadata: metadata
+          progress: self.toProgress(region: region),
+          metadata: logged("RCTMGLOfflineModule.getPacks metadata is null") { metadata } ?? [:]
         )
 
         if ((region.completedResourceCount == region.completedResourceSize)) {
@@ -301,12 +368,8 @@ class RCTMGLOfflineModule: RCTEventEmitter {
     RCTMGLEvent(type: .offlineProgress, payload: self._makeRegionStatusPayload(name, progress: progress, state: state, metadata: nil))
   }
   
-  func shouldSendProgressEvent() -> Bool {
-    return true
-  }
-  
   func offlinePackProgressDidChange(progress: TileRegionLoadProgress, metadata: [String:Any], state: State) {
-    if self.shouldSendProgressEvent() {
+    if self.shouldSendProgressEvent(progress: progress, state: state) {
       let event = makeProgressEvent(metadata["name"] as! String, progress: progress, state: state)
       self._sendEvent(Callbacks.progress.rawValue, event: event)
     }
@@ -322,9 +385,9 @@ class RCTMGLOfflineModule: RCTEventEmitter {
     DispatchQueue.main.async {
       do {
         let metadataStr = options["metadata"] as! String
-        let metadata = try JSONSerialization.jsonObject(with: metadataStr.data(using: .utf8)!, options: []) as! [String:Any]
+        var metadata = try JSONSerialization.jsonObject(with: metadataStr.data(using: .utf8)!, options: []) as! [String:Any]
+        metadata["styleURI"] = options["styleURL"]
         let id = metadata["name"] as! String
-        let stylePackLoadOptions = StylePackLoadOptions(glyphsRasterizationMode: .ideographsRasterizedLocally, metadata: metadata)
 
         let boundsStr = options["bounds"] as! String
         let boundsData = boundsStr.data(using: .utf8)
@@ -332,53 +395,16 @@ class RCTMGLOfflineModule: RCTEventEmitter {
 
         var bounds = self.convertPointPairToBounds(RCTMGLFeatureUtils.fcToGeomtry(boundsFC))
 
-        let descriptorOptions = TilesetDescriptorOptions(
-          styleURI: StyleURI(rawValue: options["styleURL"] as! String)!,
-          zoomRange: (options["minZoom"] as! NSNumber).uint8Value...(options["maxZoom"] as! NSNumber).uint8Value,
-          stylePackOptions: stylePackLoadOptions
-        )
-        let tilesetDescriptor = self.offlineManager.createTilesetDescriptor(for: descriptorOptions)
-
-        let loadOptions = TileRegionLoadOptions(
-          geometry: bounds, // RCTMGLFeatureUtils.geometryToGeometry(bounds),
-          descriptors: [tilesetDescriptor],
-          metadata: metadata,
-          acceptExpired: true,
-          networkRestriction: .none,
-          averageBytesPerSecond: nil)
-
         let actPack = RCTMGLOfflineModule.TileRegionPack(
           name: id,
-          progress: nil,
-          state: .inactive
+          styleURI: StyleURI(rawValue: options["styleURL"] as! String)!,
+          bounds: bounds,
+          zoomRange: (options["minZoom"] as! NSNumber).uint8Value...(options["maxZoom"] as! NSNumber).uint8Value,
+          metadata: metadata
         )
         self.tileRegionPacks[id] = actPack
+        self.startLoading(pack: actPack)
 
-        var lastProgress : TileRegionLoadProgress? = nil
-        let task = self.tileStore.loadTileRegion(forId: id, loadOptions: loadOptions!, progress: {
-          progress in
-          lastProgress = progress
-          self.tileRegionPacks[id]!.progress = progress
-          self.tileRegionPacks[id]!.state = .active
-          self.offlinePackProgressDidChange(progress: progress, metadata: metadata, state: .active)
-        }) { result in
-          switch result {
-          case .success(let value):
-            DispatchQueue.main.async {
-              if let progess = lastProgress {
-                self.offlinePackProgressDidChange(progress: progess, metadata: metadata, state: .complete)
-              }
-              self.tileRegionPacks[id]!.state = .complete
-            }
-          case .failure(let error):
-            DispatchQueue.main.async {
-              self.tileRegionPacks[id]!.state = .inactive
-              self.offlinePackDidReceiveError(name: id, error: error)
-            }
-          }
-        }
-
-        self.tileRegionPacks[id]!.cancelable = task
         resolver([
           "bounds": boundsStr,
           "metadata": String(data:try! JSONSerialization.data(withJSONObject: metadata, options: [.prettyPrinted]), encoding: .utf8)
@@ -389,10 +415,72 @@ class RCTMGLOfflineModule: RCTEventEmitter {
     }
   }
   
+  func startLoading(pack: TileRegionPack) {
+    let id = pack.name
+    guard let bounds = pack.bounds else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there are no bounds in pack")
+      return
+    }
+    guard let zoomRange = pack.zoomRange else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there is no zoom range in pack")
+      return
+    }
+    guard let styleURI = pack.styleURI else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there is no styleURI in pack")
+      return
+    }
+    guard let metadata = pack.metadata else {
+      RCTMGLLogError("RCTMGLOfflineModule.startLoading failed as there is no metadata in pack")
+      return
+    }
+    
+    let stylePackLoadOptions = StylePackLoadOptions(glyphsRasterizationMode: .ideographsRasterizedLocally, metadata: pack.metadata)
+    
+    let descriptorOptions = TilesetDescriptorOptions(
+      styleURI: styleURI,
+      zoomRange: zoomRange,
+      stylePackOptions: stylePackLoadOptions
+    )
+    let tilesetDescriptor = self.offlineManager.createTilesetDescriptor(for: descriptorOptions)
+
+    let loadOptions = TileRegionLoadOptions(
+      geometry: bounds, // RCTMGLFeatureUtils.geometryToGeometry(bounds),
+      descriptors: [tilesetDescriptor],
+      metadata: metadata,
+      acceptExpired: true,
+      networkRestriction: .none,
+      averageBytesPerSecond: nil)
+
+    var lastProgress : TileRegionLoadProgress? = nil
+    let task = self.tileStore.loadTileRegion(forId: id, loadOptions: loadOptions!, progress: {
+      progress in
+      lastProgress = progress
+      self.tileRegionPacks[id]!.progress = progress
+      self.tileRegionPacks[id]!.state = .active
+      self.offlinePackProgressDidChange(progress: progress, metadata: metadata, state: .active)
+    }) { result in
+      switch result {
+      case .success(let value):
+        DispatchQueue.main.async {
+          if let progess = lastProgress {
+            self.offlinePackProgressDidChange(progress: progess, metadata: metadata, state: .complete)
+          }
+          self.tileRegionPacks[id]!.state = .complete
+        }
+      case .failure(let error):
+        DispatchQueue.main.async {
+          self.tileRegionPacks[id]!.state = .inactive
+          self.offlinePackDidReceiveError(name: id, error: error)
+        }
+      }
+    }
+    self.tileRegionPacks[id]!.cancelable = task
+  }
+
   func _getPack(fromName: String) -> TileRegionPack? {
     return self.tileRegionPacks[fromName]
   }
-  
+
   @objc
   func getPackStatus(_ name: String,
                      resolver: @escaping RCTPromiseResolveBlock,
@@ -408,12 +496,10 @@ class RCTMGLOfflineModule: RCTEventEmitter {
         Logger.log(level:.error, message: "Unable to fetch metadata for \(name)")
         rejecter("RCTMGLOfflineModule.getPackStatus", error.localizedDescription, error)
       case .success(let metadata):
-        var pack = self.tileRegionPacks[name] ?? TileRegionPack(name: name)
-        if let metadata = metadata as? [String:Any] {
-          pack.metadata = metadata
-        } else {
-          Logger.log(level:.error, message: "Unexpected metadata format for \(name) \(metadata)")
-        }
+        var pack = self.tileRegionPacks[name] ?? TileRegionPack(
+          name: name,
+          metadata: logged("RCTMGLOfflineModule.getPackStatus") { metadata as? [String:Any] } ?? [:]
+        )
         self.tileRegionPacks[name] = pack
         resolver(self._makeRegionStatusPayload(pack: pack))
       }
@@ -424,7 +510,9 @@ class RCTMGLOfflineModule: RCTEventEmitter {
   @objc
   func resumePackDownload(_ name: String, resolver: RCTPromiseResolveBlock, rejecter: RCTPromiseRejectBlock)
   {
-    //V10todo start download again
+    if let pack = _getPack(fromName: name) {
+      self.startLoading(pack: pack)
+    }
   }
   
   @objc
@@ -440,12 +528,7 @@ class RCTMGLOfflineModule: RCTEventEmitter {
   
   @objc
   func setTileCountLimit(_ limit: NSNumber) {
-    //v10todo
-  }
-  
-  @objc
-  func setProgressEventThrottle(_ throttleValue: NSNumber) {
-    // v10todo improve progress event listener
+    RCTMGLLogWarn("setTileCountLimit is not yet implemented on v10")
   }
   
   
@@ -486,3 +569,38 @@ class RCTMGLOfflineModule: RCTEventEmitter {
     }
   }
 }
+
+// MARK: progress throttle
+
+extension RCTMGLOfflineModule {
+  @objc
+  func setProgressEventThrottle(_ throttleValue: NSNumber) {
+    progressEventThrottle.waitBetweenEvents = throttleValue.doubleValue
+  }
+  
+
+  func shouldSendProgressEvent(progress: TileRegionLoadProgress, state: State) -> Bool
+  {
+    let currentTimestamp: Double = CACurrentMediaTime() * 1000.0
+    
+    guard let lastSentState = progressEventThrottle.lastSentState, lastSentState == state else {
+      progressEventThrottle.lastSentState = state
+      progressEventThrottle.lastSentTimestamp = currentTimestamp
+      return true
+    }
+    
+    guard let waitBetweenEvents = progressEventThrottle.waitBetweenEvents,
+          let lastSentTimestamp = progressEventThrottle.lastSentTimestamp else {
+      progressEventThrottle.lastSentTimestamp = currentTimestamp
+      return true;
+    }
+    
+    if (currentTimestamp - lastSentTimestamp > waitBetweenEvents) {
+      progressEventThrottle.lastSentTimestamp = currentTimestamp
+      return true;
+    }
+     
+    return false;
+  }
+}
+

package/ios/RCTMGL-v10/RCTMGLStyleValue.swift

@@ -5,6 +5,10 @@ func deg2rad(_ number: Double) -> Double {
     return number * .pi / 180
 }
 
+enum StyleConversionError: Error {
+  case unexpectedType(message: String)
+}
+
 class RCTMGLStyleValue {
   var value: Any
   var styleType: String? = nil
@@ -325,11 +329,14 @@ class RCTMGLStyleValue {
       return .constant(valueObj)
     } else {
       do {
+        if valueObj is String {
+          throw StyleConversionError.unexpectedType(message: "should be array constant or expression")
+        }
         let data = try JSONSerialization.data(withJSONObject: valueObj, options: .prettyPrinted)
         let decodedExpression = try JSONDecoder().decode(Expression.self, from: data)
         return .expression(decodedExpression)
       } catch {
-        Logger.log(level: .error, message: "Invalid value for array number: \(value) error: \(error) setting dummy value")
+        Logger.log(level: .error, message: "Invalid value for array => value: \(value) error: \(error) setting dummy value")
         return .constant([""])
       }
     }

package/javascript/components/BackgroundLayer.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { NativeModules, requireNativeComponent } from 'react-native';
+
+import {
+  FilterExpression,
+  BackgroundLayerStyleProps,
+} from '../utils/MapboxStyles';
+import { StyleValue } from '../utils/StyleValue';
+
+import AbstractLayer from './AbstractLayer';
+
+const MapboxGL = NativeModules.MGLModule;
+
+export type Props = {
+  /**
+   * A string that uniquely identifies the source in the style to which it is added.
+   */
+  id: string;
+
+  /**
+   * The source from which to obtain the data to style.
+   * If the source has not yet been added to the current style, the behavior is undefined.
+   * Inferred from parent source only if the layer is a direct child to it.
+   */
+  sourceID?: string;
+
+  /**
+   * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
+   */
+  sourceLayerID?: string;
+
+  /**
+   * Inserts a layer above aboveLayerID.
+   */
+  aboveLayerID?: string;
+
+  /**
+   * Inserts a layer below belowLayerID
+   */
+  belowLayerID?: string;
+
+  /**
+   * Inserts a layer at a specified index
+   */
+  layerIndex?: number;
+
+  /**
+   *  Filter only the features in the source layer that satisfy a condition that you define
+   */
+  filter?: FilterExpression;
+
+  /**
+   * The minimum zoom level at which the layer gets parsed and appears.
+   */
+  minZoomLevel?: number;
+
+  /**
+   * The maximum zoom level at which the layer gets parsed and appears.
+   */
+  maxZoomLevel?: number;
+
+  /**
+   * Customizable style attributes
+   */
+  style?: BackgroundLayerStyleProps;
+} & React.ComponentProps<typeof AbstractLayer>;
+
+export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
+
+type NativeTypeProps = Omit<Props, 'style'> & {
+  reactStyle?: { [key: string]: StyleValue };
+};
+
+class BackgroundLayer extends AbstractLayer<Props, NativeTypeProps> {
+  static defaultProps = {
+    sourceID: MapboxGL.StyleSource.DefaultSourceID,
+  };
+
+  render() {
+    const props = {
+      ...this.baseProps,
+      sourceLayerID: this.props.sourceLayerID,
+    };
+    return <RCTMGLBackgroundLayer ref={this.setNativeLayer} {...props} />;
+  }
+}
+
+const RCTMGLBackgroundLayer =
+  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
+
+export default BackgroundLayer;