@rnmapbox/maps 10.0.0-beta.70 → 10.0.0-beta.72

package/ios/RCTMGL-v10/RCMTGLImage.swift

@@ -0,0 +1,93 @@
+import MapboxMaps
+
+class RCTMGLImage : UIView {
+  @objc
+  var name: String = ""
+
+  var image: UIImage? = nil
+  
+  var sdf: Bool? = nil
+  var stretchX: [[NSNumber]] = []
+  var stretchY: [[NSNumber]] = []
+
+  weak var images: RCTMGLImageSetter? = nil {
+    didSet {
+      DispatchQueue.main.async { self.setImage() }
+    }
+  }
+  weak var bridge : RCTBridge! = nil
+  
+  var reactSubviews : [UIView] = []
+  
+  // MARK: - subview management
+  
+  @objc open override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+    reactSubviews.insert(subview, at: atIndex)
+    if reactSubviews.count > 1 {
+      Logger.log(level: .error, message: "Image supports max 1 subview")
+    }
+    if image == nil {
+      DispatchQueue.main.asyncAfter(deadline: .now() + .microseconds(10)) {
+        self.setImage()
+      }
+    }
+  }
+
+  @objc
+  open override func removeReactSubview(_ subview: UIView!) {
+    reactSubviews.removeAll(where: { $0 == subview })
+  }
+  
+  // MARK: - view shnapshot
+  
+  func changeImage(_ image: UIImage, name: String) {
+    if let images = images {
+      let _ = images.addImage(name: name, image: image, sdf: sdf, stretchX:stretchX, stretchY:stretchY, log: "RCTMGLImage.addImage")
+    }
+  }
+  
+  func setImage() {
+    if let image = _createViewSnapshot() {
+      changeImage(image, name: name)
+    }
+  }
+
+  func _createViewSnapshot() -> UIImage? {
+    let useDummyImage = false
+    if useDummyImage {
+      let size = CGSize(width: 32, height: 32)
+      let renderer = UIGraphicsImageRenderer(size: size)
+      let image = renderer.image { context in
+        UIColor.darkGray.setStroke()
+          context.stroke(CGRect(x: 0, y:0, width: 32, height: 32))
+          UIColor(red: 158/255, green: 215/255, blue: 245/255, alpha: 1).setFill()
+          context.fill(CGRect(x: 2, y: 2, width: 30, height: 30))
+      }
+      return image
+    }
+    guard reactSubviews.count > 0 else {
+      return nil
+    }
+    return _createViewSnapshot(view: reactSubviews[0])
+  }
+   
+  func _createViewSnapshot(view: UIView) -> UIImage? {
+    guard view.bounds.size.width > 0 && view.bounds.size.height > 0 else {
+      return nil
+    }
+    
+    let roundUp = 4
+    
+    let adjustedSize = CGSize(
+      width: ((Int(view.bounds.size.width)+roundUp-1)/roundUp)*roundUp,
+      height: ((Int(view.bounds.size.height)+roundUp-1)/roundUp)*roundUp
+    )
+    
+    let renderer = UIGraphicsImageRenderer(size: adjustedSize)
+    let image = renderer.image { context in
+      view.layer.render(in: context.cgContext)
+    }
+    return image
+  }
+}
+

package/ios/RCTMGL-v10/RCMTGLImageManager.m

@@ -0,0 +1,9 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(RCTMGLImageManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(name, NSString)
+
+@end
+

package/ios/RCTMGL-v10/RCMTGLImageManager.swift

@@ -0,0 +1,14 @@
+
+@objc(RCTMGLImageManager)
+class RCTMGLImageManager : RCTViewManager {
+  @objc
+  override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+
+  override func view() -> UIView! {
+    let layer = RCTMGLImage()
+    layer.bridge = self.bridge
+    return layer
+  }
+}

package/ios/RCTMGL-v10/RCTMGLCamera.swift

@@ -107,57 +107,67 @@ open class RCTMGLMapComponentBase : UIView, RCTMGLMapComponent {
 class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
   var cameraAnimator: BasicCameraAnimator?
   let cameraUpdateQueue = CameraUpdateQueue()
-
+  
   // MARK: React properties
   
   @objc var animationDuration: NSNumber?
+  
   @objc var animationMode: NSString?
+  
   @objc var defaultStop: [String: Any]?
-  @objc var followHeading: NSNumber? {
+  
+  @objc var followUserLocation : Bool = false {
     didSet {
       _updateCameraFromTrackingMode()
     }
   }
-  @objc var followPitch: NSNumber? {
+  
+  @objc var followUserMode: String? {
     didSet {
       _updateCameraFromTrackingMode()
     }
   }
-
-  @objc var followUserMode: String? {
+  
+  @objc var followZoomLevel: NSNumber? {
     didSet {
       _updateCameraFromTrackingMode()
     }
   }
-
-  @objc var followUserLocation : Bool = false {
+  
+  @objc var followPitch: NSNumber? {
     didSet {
       _updateCameraFromTrackingMode()
     }
   }
-
-  @objc var followZoomLevel: NSNumber? {
+  
+  @objc var followHeading: NSNumber? {
     didSet {
       _updateCameraFromTrackingMode()
     }
   }
-
+  
+  @objc var followPadding: NSDictionary? {
+    didSet {
+      _updateCameraFromTrackingMode()
+    }
+  }
+  
   @objc var maxZoomLevel: NSNumber? {
     didSet { _updateMaxBounds() }
   }
-
+  
   @objc var minZoomLevel: NSNumber? {
     didSet { _updateMaxBounds() }
   }
-
+  
   @objc var onUserTrackingModeChange: RCTBubblingEventBlock? = nil
-
+  
   @objc var stop: [String: Any]? {
     didSet {
       _updateCamera()
     }
   }
-
+  
   @objc var maxBounds: String? {
     didSet {
       if let maxBounds = maxBounds {
@@ -288,22 +298,23 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
         followOptions.bearing = nil
         trackingModeChanged = true
       }
+      
       if let onUserTrackingModeChange = self.onUserTrackingModeChange {
         if (trackingModeChanged) {
           let event = RCTMGLEvent(type: .onUserTrackingModeChange, payload: ["followUserMode": self.followUserMode ?? "normal", "followUserLocation": self.followUserLocation])
           onUserTrackingModeChange(event.toJSON())
         }
       }
+      
       var _camera = CameraOptions()
-      if let followHeading = self.followHeading as? CGFloat {
-        if (followHeading >= 0.0) {
-          _camera.bearing = followHeading
-        }
-      } else if let stopHeading = self.stop?["heading"] as? CGFloat {
-        if (stopHeading >= 0.0) {
-          _camera.bearing = stopHeading
+      
+      if let zoom = self.followZoomLevel as? CGFloat {
+        if (zoom >= 0.0) {
+          _camera.zoom = zoom
+          followOptions.zoom = zoom
         }
       }
+      
       if let followPitch = self.followPitch as? CGFloat {
         if (followPitch >= 0.0) {
           _camera.pitch = followPitch
@@ -317,14 +328,29 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
       } else {
         followOptions.pitch = nil
       }
-
-      if let zoom = self.followZoomLevel as? CGFloat {
-        if (zoom >= 0.0) {
-          _camera.zoom = zoom
-          followOptions.zoom = zoom
+      
+      if let followHeading = self.followHeading as? CGFloat {
+        if (followHeading >= 0.0) {
+          _camera.bearing = followHeading
         }
+      } else if let stopHeading = self.stop?["heading"] as? CGFloat {
+        if (stopHeading >= 0.0) {
+          _camera.bearing = stopHeading
+        }
+      }
+      
+      if let padding = self.followPadding {
+        let edgeInsets = UIEdgeInsets(
+          top: padding["paddingTop"] as? Double ?? 0,
+          left: padding["paddingLeft"] as? Double ?? 0,
+          bottom: padding["paddingBottom"] as? Double ?? 0,
+          right: padding["paddingRight"] as? Double ?? 0
+        )
+        followOptions.padding = edgeInsets
       }
+      
       let followState = map.viewport.makeFollowPuckViewportState(options: followOptions)
+      
       map.viewport.transition(to: followState)
       map.viewport.addStatusObserver(self)
       map.mapboxMap.setCamera(to: _camera)

package/ios/RCTMGL-v10/RCTMGLCameraManager.m

@@ -8,11 +8,14 @@ RCT_EXPORT_VIEW_PROPERTY(maxBounds, NSString)
 RCT_EXPORT_VIEW_PROPERTY(animationDuration, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(animationMode, NSString)
 RCT_EXPORT_VIEW_PROPERTY(defaultStop, NSDictionary)
-RCT_EXPORT_VIEW_PROPERTY(followHeading, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(followPitch, NSNumber)
+
 RCT_EXPORT_VIEW_PROPERTY(followUserLocation, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(followUserMode, NSString)
 RCT_EXPORT_VIEW_PROPERTY(followZoomLevel, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(followPitch, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(followHeading, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(followPadding, NSDictionary)
+
 RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(onUserTrackingModeChange, RCTBubblingEventBlock)

package/ios/RCTMGL-v10/RCTMGLImages.swift

@@ -1,18 +1,50 @@
 import MapboxMaps
 
+protocol RCTMGLImageSetter : AnyObject {
+  func addImage(name: String, image: UIImage, sdf: Bool?, stretchX: [[NSNumber]], stretchY: [[NSNumber]], log: String) -> Bool
+}
+
 class RCTMGLImages : UIView, RCTMGLMapComponent {
   
   weak var bridge : RCTBridge! = nil
   var remoteImages : [String:String] = [:]
   
+  weak var style: Style? = nil
+
   @objc
   var onImageMissing: RCTBubblingEventBlock? = nil
   
   @objc
   var images : [String:Any] = [:]
   
+  var imageViews: [RCTMGLImage] = []
+
   @objc
-  var nativeImages: [String] = []
+  var nativeImages: [Any] = [] {
+    didSet {
+      nativeImageInfos = nativeImages.compactMap { decodeImage($0) }
+    }
+  };
+
+  typealias NativeImageInfo = (name:String, sdf: Bool, stretchX:[(from:Float, to:Float)], stretchY:[(from:Float, to:Float)]);
+  var nativeImageInfos: [NativeImageInfo] = []
+  
+  @objc open override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+    if let image = subview as? RCTMGLImage {
+      imageViews.insert(image, at: atIndex)
+    } else {
+      Logger.log(level:.warn, message: "RCTMGLImages children can only be RCTMGLImage, got \(optional: subview)")
+    }
+    super.insertReactSubview(subview, at: atIndex)
+  }
+  
+  @objc open override func removeReactSubview(_ subview: UIView!) {
+    if let image = subview as? RCTMGLImage {
+      imageViews.removeAll { $0 == image }
+      image.images = nil
+    }
+    super.removeReactSubview(subview)
+  }
   
   // MARK: - RCTMGLMapComponent
 
@@ -21,14 +53,17 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
   }
   
   func addToMap(_ map: RCTMGLMapView, style: Style) {
+    self.style = style
     map.images.append(self)
     map.setupEvents()
     
-    self.addNativeImages(style: style, nativeImages: nativeImages)
+    self.addNativeImages(style: style, nativeImages: nativeImageInfos)
     self.addRemoteImages(style: style, remoteImages: images)
+    self.addImageViews(style: style, imageViews: imageViews)
   }
   
   func removeFromMap(_ map: RCTMGLMapView) {
+    self.style = nil
     // v10todo
   }
   
@@ -56,9 +91,15 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     }
   }
   
+  private func addImageViews(style: Style, imageViews: [RCTMGLImage]) {
+    imageViews.forEach { imageView in
+      imageView.images = self
+    }
+  }
+  
   public func addMissingImageToStyle(style: Style, imageName: String) -> Bool {
-    if nativeImages.contains(imageName) {
-      addNativeImages(style: style, nativeImages: [imageName])
+    if let nativeImage = nativeImageInfos.first(where: { $0.name == imageName }) {
+      addNativeImages(style: style, nativeImages: [nativeImage])
       return true
     }
     
@@ -77,11 +118,57 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     }
   }
   
-  func addNativeImages(style: Style, nativeImages: [String]) {
-    for imageName in nativeImages {
-      if style.styleManager.getStyleImage(forImageId: imageName) == nil {
+  func convert(stretch: [[NSNumber]]) -> [(from: Float, to: Float)] {
+    return stretch.map{ pair in
+      return (from: pair[0].floatValue, to: pair[1].floatValue)
+    }
+  }
+  
+  func convert(stretch: [(from: Float, to: Float)]) -> [ImageStretches] {
+    return stretch.map { v in ImageStretches(first: v.from, second: v.to) }
+  }
+  
+  func decodeImage(_ imageNameOrInfo: Any) -> NativeImageInfo? {
+    if let imageName = imageNameOrInfo as? String {
+      return (name: imageName, sdf: false, stretchX:[],stretchY:[])
+    } else if let imageInfo = imageNameOrInfo as? [String:Any] {
+      guard let name = imageInfo["name"] as? String else {
+        Logger.log(level: .warn, message: "NativeImage: \(imageInfo) has no name key")
+        return nil
+      }
+      var sdf = false
+      var stretchX : [(from:Float, to:Float)] = []
+      var stretchY : [(from:Float, to:Float)] = []
+      if let sdfV = imageInfo["sdf"] as? NSNumber {
+        sdf = sdfV.boolValue
+      }
+      
+      if let stretchXV = imageInfo["stretchX"] as? [[NSNumber]] {
+        stretchX = convert(stretch: stretchXV)
+      }
+      
+      if let stretchYV = imageInfo["stretchY"] as? [[NSNumber]] {
+        stretchY = convert(stretch: stretchYV)
+      }
+      
+      return (name: name, sdf: sdf, stretchX: stretchX, stretchY: stretchY)
+    } else {
+      Logger.log(level: .warn, message: "RCTMGLImage.nativeImage, unexpected image: \(imageNameOrInfo)")
+      return nil
+    }
+  }
+  
+  func addNativeImages(style: Style, nativeImages: [NativeImageInfo]) {
+    for imageInfo in nativeImages {
+      let imageName = imageInfo.name
+      if style.styleManager.getStyleImage(forImageId: imageInfo.name) == nil {
         if let image = UIImage(named: imageName) {
-          try! style.addImage(image, id: imageName, stretchX: [], stretchY: [])
+          logged("RCTMGLImage.addNativeImage: \(imageName)") {
+            try style.addImage(image, id: imageName, sdf: imageInfo.sdf,
+                               stretchX: convert(stretch: imageInfo.stretchX),
+                               stretchY: convert(stretch: imageInfo.stretchY)
+            )
+          }
         } else {
           Logger.log(level:.error, message: "Cannot find nativeImage named \(imageName)")
         }
@@ -95,5 +182,23 @@ class RCTMGLImages : UIView, RCTMGLMapComponent {
     UIGraphicsEndImageContext()
     return result
   }()
+}
 
+extension RCTMGLImages : RCTMGLImageSetter {
+  func addImage(name: String, image: UIImage, sdf: Bool?, stretchX: [[NSNumber]], stretchY: [[NSNumber]], log: String) -> Bool
+  {
+     return logged("\(log).addImage") {
+       if let style = style {
+         try style.addImage(image,
+                            id:name,
+                            sdf: sdf ?? false,
+                            stretchX: convert(stretch: convert(stretch: stretchX)),
+                            stretchY: convert(stretch: convert(stretch: stretchY))
+         )
+         return true
+       } else {
+         return false
+       }
+     } ?? false
+ }
 }

package/ios/install.md

@@ -60,7 +60,7 @@ You can also override the version to use. *Warning:* if you set a version, then
 
 ```ruby
 # Warning: only for advanced use cases, only do this if you know what you're doing.
-# $RNMapboxMapsVersion = '~> 10.11.0'
+# $RNMapboxMapsVersion = '~> 10.12.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`.

package/javascript/components/Camera.tsx

@@ -122,16 +122,18 @@ export type CameraStop = {
 };
 
 export type CameraFollowConfig = {
-  /** The mode used to track the user location on the map. */
-  followUserMode?: UserTrackingMode;
   /** Whether the map orientation follows the user location. */
   followUserLocation?: boolean;
+  /** The mode used to track the user location on the map. */
+  followUserMode?: UserTrackingMode;
   /** The zoom level used when following the user location. */
   followZoomLevel?: number;
   /** The pitch used when following the user location. */
   followPitch?: number;
   /** The heading used when following the user location. */
   followHeading?: number;
+  /** The padding used to position the user location when following. */
+  followPadding?: Partial<CameraPadding>;
 };
 
 export type CameraMinMaxConfig = {
@@ -232,6 +234,7 @@ export const Camera = memo(
         followZoomLevel,
         followPitch,
         followHeading,
+        followPadding,
         defaultSettings,
         allowUpdates = true,
         onUserTrackingModeChange,
@@ -526,9 +529,10 @@ export const Camera = memo(
           defaultStop={nativeDefaultStop}
           followUserLocation={followUserLocation}
           followUserMode={followUserMode}
+          followZoomLevel={followZoomLevel}
           followPitch={followPitch}
           followHeading={followHeading}
-          followZoomLevel={followZoomLevel}
+          followPadding={followPadding}
           minZoomLevel={minZoomLevel}
           maxZoomLevel={maxZoomLevel}
           maxBounds={nativeMaxBounds}

package/javascript/components/Image.tsx

@@ -0,0 +1,55 @@
+import React, { memo, forwardRef, ReactElement } from 'react';
+import { requireNativeComponent } from 'react-native';
+
+interface Props {
+  /** Image name */
+  name: string;
+
+  /** Make image an sdf optional - see [SDF icons](https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-mapbox-maps/) */
+  sdf?: boolean;
+
+  /** stretch along x axis - optional */
+  stretchX?: [number, number][];
+
+  /** stretch along y axis - optional */
+  stretchY?: [number, number][];
+
+  /** Single react native view generating the image */
+  children: ReactElement;
+}
+
+interface Ref {
+  refresh: () => void;
+}
+
+const Image = memo(
+  forwardRef<Ref, Props>(function Image(
+    { name, sdf, stretchX, stretchY, children }: Props,
+    ref: React.ForwardedRef<Ref>,
+  ) {
+    const nativeProps = {
+      name,
+      sdf,
+      stretchX,
+      stretchY,
+      children,
+    };
+    return <RCTMGLImage {...nativeProps} />;
+  }),
+);
+
+interface NativeProps {
+  name: string;
+  children: ReactElement;
+  sdf?: boolean;
+  stretchX?: [number, number][];
+  stretchY?: [number, number][];
+}
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImage';
+
+const RCTMGLImage = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+Image.displayName = 'Image';
+
+export default Image;