@rnmapbox/maps 10.0.0-beta.41 → 10.0.0-beta.43

package/ios/RCTMGL-v10/RCTMGLMapView.swift

@@ -22,8 +22,8 @@ open class RCTMGLMapView : MapView {
   var onStyleLoadedComponents: [RCTMGLMapComponent] = []
   
   private var isPendingInitialLayout = true
+  private var wasGestureActive = false
   private var isGestureActive = false
-  private var isAnimatingFromGesture = false
 
   var layerWaiters : [String:[(String) -> Void]] = [:]
   
@@ -274,8 +274,9 @@ open class RCTMGLMapView : MapView {
 extension RCTMGLMapView {
   @objc func setReactOnMapChange(_ value: @escaping RCTBubblingEventBlock) {
     self.reactOnMapChange = value
-    
-    self.mapView.mapboxMap.onEvery(.cameraChanged, handler: { cameraEvent in
+
+    self.mapView.mapboxMap.onEvery(event: .cameraChanged, handler: { cameraEvent in
+      self.wasGestureActive = self.isGestureActive
       if self.handleMapChangedEvents.contains(.regionIsChanging) {
         let event = RCTMGLEvent(type:.regionIsChanging, payload: self.buildRegionObject());
         self.fireEvent(event: event, callback: self.reactOnMapChange)
@@ -285,7 +286,7 @@ extension RCTMGLMapView {
       }
     })
 
-    self.mapView.mapboxMap.onEvery(.mapIdle, handler: { cameraEvent in
+    self.mapView.mapboxMap.onEvery(event: .mapIdle, handler: { cameraEvent in
       if self.handleMapChangedEvents.contains(.regionDidChange) {
         let event = RCTMGLEvent(type:.regionDidChange, payload: self.buildRegionObject());
         self.fireEvent(event: event, callback: self.reactOnMapChange)
@@ -293,6 +294,8 @@ extension RCTMGLMapView {
         let event = RCTMGLEvent(type:.mapIdle, payload: self.buildStateObject());
         self.fireEvent(event: event, callback: self.reactOnMapChange)
       }
+      
+      self.wasGestureActive = false
     })
   }
 
@@ -324,8 +327,7 @@ extension RCTMGLMapView {
         "pitch": Double(mapView.cameraState.pitch),
       ],
       "gestures": [
-        "isGestureActive": isGestureActive,
-        "isAnimatingFromGesture": isAnimatingFromGesture
+        "isGestureActive": wasGestureActive
       ]
     ]
   }
@@ -347,8 +349,7 @@ extension RCTMGLMapView {
       "bearing": .number(mapView.cameraState.bearing),
       "pitch": .number(mapView.cameraState.pitch),
       "visibleBounds": .array(boundsArray),
-      "isUserInteraction": .boolean(isGestureActive),
-      "isAnimatingFromUserInteraction": .boolean(isAnimatingFromGesture),
+      "isUserInteraction": .boolean(wasGestureActive),
     ]
     return logged("buildRegionObject", errorResult: { ["error":["toJSON":$0.localizedDescription]] }) {
       try result.toJSON()
@@ -356,50 +357,48 @@ extension RCTMGLMapView {
   }
   
   public func setupEvents() {
-    self.mapboxMap.onEvery(.mapLoadingError, handler: {(event) in
-      if let data = event.data as? [String:Any], let message = data["message"] {
+    self.mapboxMap.onEvery(event: .mapLoadingError, handler: {(event) in
+      if let message = event.payload.error.errorDescription {
         Logger.log(level: .error, message: "MapLoad error \(message)")
       } else {
         Logger.log(level: .error, message: "MapLoad error \(event)")
       }
     })
     
-    self.mapboxMap.onEvery(.styleImageMissing) { (event) in
-      if let data = event.data as? [String:Any] {
-        if let imageName = data["id"] as? String {
-
-          self.images.forEach {
-            if $0.addMissingImageToStyle(style: self.mapboxMap.style, imageName: imageName) {
-              return
-            }
-          }
-          
-          self.images.forEach {
-            $0.sendImageMissingEvent(imageName: imageName, event: event)
-          }
+    self.mapboxMap.onEvery(event: .styleImageMissing) { (event) in
+      let imageName = event.payload.id
+      
+      self.images.forEach {
+        if $0.addMissingImageToStyle(style: self.mapboxMap.style, imageName: imageName) {
+          return
         }
       }
+
+      self.images.forEach {
+        $0.sendImageMissingEvent(imageName: imageName, payload: event.payload)
+      }
     }
 
-    self.mapboxMap.onEvery(.renderFrameFinished, handler: { (event) in
+    self.mapboxMap.onEvery(event: .renderFrameFinished, handler: { (event) in
       var type = RCTMGLEvent.EventType.didFinishRendering
-      var payload : [String:Any]? = nil
-      if let data = event.data as? [String:Any] {
-        if let renderMode = data["render-mode"], let renderMode = renderMode as? String, renderMode == "full" {
-          type = .didFinishRenderingFully
-        }
-        payload = data
+      if event.payload.renderMode == .full {
+        type = .didFinishRenderingFully
       }
+      let payload : [String:Any] = [
+        "renderMode": event.payload.renderMode.rawValue,
+        "needsRepaint": event.payload.needsRepaint,
+        "placementChanged": event.payload.placementChanged
+      ]
       let event = RCTMGLEvent(type: type, payload: payload);
       self.fireEvent(event: event, callback: self.reactOnMapChange)
     })
 
-    self.mapboxMap.onNext(.mapLoaded, handler: { (event) in
+    self.mapboxMap.onNext(event: .mapLoaded, handler: { (event) in
       let event = RCTMGLEvent(type:.didFinishLoadingMap, payload: nil);
       self.fireEvent(event: event, callback: self.reactOnMapChange)
     })
     
-    self.mapboxMap.onEvery(.styleLoaded, handler: { (event) in
+    self.mapboxMap.onEvery(event: .styleLoaded, handler: { (event) in
       self.onStyleLoadedComponents.forEach { (component) in
         component.addToMap(self, style: self.mapboxMap.style)
       }
@@ -589,21 +588,19 @@ extension RCTMGLMapView: GestureManagerDelegate {
       }
     }
   }
-  
+
   public func gestureManager(_ gestureManager: GestureManager, didBegin gestureType: GestureType) {
     isGestureActive = true
   }
   
   public func gestureManager(_ gestureManager: GestureManager, didEnd gestureType: GestureType, willAnimate: Bool) {
-    isGestureActive = false
-    if willAnimate {
-      isAnimatingFromGesture = true
+    if !willAnimate {
+      isGestureActive = false;
     }
   }
   
   public func gestureManager(_ gestureManager: GestureManager, didEndAnimatingFor gestureType: GestureType) {
-    isGestureActive = false
-    isAnimatingFromGesture = false
+    isGestureActive = false;
   }
 }
 
@@ -922,4 +919,3 @@ class PointAnnotationManager : AnnotationInteractionDelegate {
     }
   }
 }
-

package/ios/RCTMGL-v10/RCTMGLSingletonLayer.swift

@@ -15,8 +15,14 @@ class RCTMGLSingletonLayer : UIView {
     }
   }
 
+  /// apply style updates to our copy and copy the changes to the map style
   func addStylesAndUpdate() {
     addStyles()
+    update()
+  }
+  
+  /// apply the changes made to our copy to the map style
+  func update() {
     if let style = style,
       let map = map {
       self.update(map, style)
@@ -38,4 +44,4 @@ class RCTMGLSingletonLayer : UIView {
   func apply(style: Style) throws {
     fatalError("Subclasses should overrride")
   }
-}
+}

package/ios/RCTMGL-v10/RCTMGLStyle.swift

@@ -801,6 +801,29 @@ func atmosphereLayer(layer: inout Atmosphere, reactStyle:Dictionary<String, Any>
   }
 }
 
+func terrainLayer(layer: inout Terrain, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout Terrain)->Void)->Void, isValid: @escaping () -> Bool)
+{
+  guard self._hasReactStyle(reactStyle) else {
+    Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
+    return
+  }
+
+  let styleProps = reactStyle.keys
+  for prop in styleProps {
+    if (prop == "__MAPBOX_STYLESHEET__") {
+      continue;
+    }
+
+    let styleValue = RCTMGLStyleValue.make(reactStyle[prop])
+
+    if (prop == "exaggeration") {
+      self.setExaggeration(&layer, styleValue:styleValue);
+    } else {
+      Logger.log(level:.error, message: "Unexpected property \(prop) for layer: terrain")
+    }
+  }
+}
+
 
 
 
@@ -2501,6 +2524,17 @@ func setStarIntensityTransition(_ layer: inout Atmosphere, styleValue: RCTMGLSty
 
 
 
+func setExaggeration(_ layer: inout Terrain, styleValue: RCTMGLStyleValue)
+{
+      
+        
+          layer.exaggeration = styleValue.mglStyleValueNumber();
+        
+      
+}
+
+
+
 func _hasReactStyle(_ reactStyle: Dictionary<String, Any>) -> Bool
 {
   return reactStyle != nil && reactStyle.keys.count > 0;

package/ios/RCTMGL-v10/RCTMGLTerrain.swift

@@ -1,49 +1,16 @@
 import MapboxMaps
 
 @objc
-class RCTMGLTerrain : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
-  weak var map : RCTMGLMapView!
-  var style : Style! = nil
-  
-  var bridge : RCTBridge? = nil
+class RCTMGLTerrain : RCTMGLSingletonLayer, RCTMGLMapComponent, RCTMGLSourceConsumer {
   var terrain : Terrain? = nil
   
-  @objc var sourceID: String? = nil
-  
-  @objc var exaggeration : Any? = nil
-  
-  func waitForStyleLoad() -> Bool {
-    return true
-  }
-
   func makeTerrain() -> Terrain {
-    print("=> sourceID \(sourceID)")
     guard let sourceID = sourceID else {
       Logger.log(level: .error, message: "Terrain should have a sourceID")
       return Terrain(sourceId: "n/a")
     }
-    var terrain = Terrain(sourceId: sourceID)
-    if let exaggeration = exaggeration {
-      do {
-        terrain.exaggeration = try toValue(exaggeration)
-      } catch {
-        Logger.log(level: .error, message: "Faied to parse exaggeration value: \(exaggeration) \(error)")
-      }
-    }
-    
-    return terrain
-  }
-  
-  func toValue(_ value: Any) throws -> Value<Double>? {
-    if let value = value as? NSNumber {
-      return .constant(value.doubleValue)
-    } else if let value = value as? [Any] {
-      let data = try JSONSerialization.data(withJSONObject: value, options: .prettyPrinted)
-      let decodedExpression = try JSONDecoder().decode(Expression.self, from: data)
-      return .expression(decodedExpression)
-    } else {
-      throw RCTMGLError.parseError("failed to parse value")
-    }
+
+    return Terrain(sourceId: sourceID)
   }
   
   func addToMap(_ map: RCTMGLMapView, style: Style) {
@@ -52,32 +19,7 @@ class RCTMGLTerrain : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
     
     let terrain = self.makeTerrain()
     self.terrain = terrain
-    map.onMapStyleLoaded { _ in
-      if let mapboxMap = map.mapboxMap {
-        let style = mapboxMap.style
-        logged("RCTMGLTerrain.addToMap") {
-          try style.setTerrain(terrain)
-        }
-      }
-    }
-  }
-  
-  func addToMap(_ map: RCTMGLMapView) {
-    self.map = map
-  
-    guard let mapboxMap = map.mapboxMap else {
-      return
-    }
-    
-    mapboxMap.onNext(.styleLoaded) {_ in
-      let style = mapboxMap.style
- 
-      do {
-        try style.setTerrain(self.makeTerrain())
-      } catch {
-        Logger.log(level: .error, message: "setTerrain failed: \(error)")
-      }
-    }
+    addStylesAndUpdate()
   }
   
   func removeFromMap(_ map: RCTMGLMapView) {
@@ -91,7 +33,58 @@ class RCTMGLTerrain : UIView, RCTMGLMapComponent, RCTMGLSourceConsumer {
     removeFromMap(map, style: style)
   }
   
+  func waitForStyleLoad() -> Bool {
+    return true
+  }
+  
   func removeFromMap(_ map: RCTMGLMapView, style: Style) {
-    style.removeTerrain()
+    logged("RCTMGLTerrain.removeFromMap") {
+      style.removeTerrain()
+    }
+  }
+
+  @objc var sourceID: String? = nil {
+    didSet {
+      guard let sourceID = sourceID else {
+        Logger.log(level: .error, message: "RCTMGLTerrain cannot set source to nil")
+        return
+      }
+      
+      terrain?.source = sourceID
+      self.update()
+    }
+  }
+  
+  override func addStylesAndUpdate() {
+    guard terrain != nil else {
+      return
+    }
+
+    super.addStylesAndUpdate()
+  }
+  
+  override func addStyles() {
+    if let style : Style = self.style {
+      let styler = RCTMGLStyle(style: style)
+      styler.bridge = self.bridge
+      
+      if var terrain = terrain {
+        styler.terrainLayer(
+          layer: &terrain,
+          reactStyle: reactStyle ?? [:],
+          applyUpdater: { (updater) in fatalError("Terrain: TODO - implement apply updater")},
+          isValid: { fatalError("Terrain: TODO - no isValid") }
+        )
+        self.terrain = terrain
+      } else {
+        fatalError("[xxx] terrain is nil \(optional: self.terrain)")
+      }
+    }
+  }
+  
+  override func apply(style : Style) throws {
+    if let terrain = terrain {
+      try style.setTerrain(terrain)
+    }
   }
 }

package/ios/RCTMGL-v10/RCTMGLTerrainManager.m

@@ -10,7 +10,6 @@
 
 RCT_EXPORT_VIEW_PROPERTY(sourceID, NSString);
 
-RCT_CUSTOM_VIEW_PROPERTY(exaggeration, NSObject, RCTMGLTerrain) {
-  view.exaggeration = json;
-}
+RCT_EXPORT_VIEW_PROPERTY(reactStyle, NSDictionary);
+
 @end

package/javascript/components/AbstractLayer.tsx

@@ -0,0 +1,72 @@
+/* eslint react/prop-types:0  */
+import React from 'react';
+import { NativeMethods, processColor } from 'react-native';
+
+import { getFilter } from '../utils/filterUtils';
+import { transformStyle } from '../utils/StyleValue';
+import { AllLayerStyleProps } from '../utils/MapboxStyles';
+
+type PropsBase = {
+  id: string;
+  sourceID?: string;
+  minZoomLevel?: number;
+  maxZoomLevel?: number;
+  aboveLayerID?: string;
+  belowLayerID?: string;
+  layerIndex?: number;
+  filter?: string[];
+  style: AllLayerStyleProps;
+};
+
+class AbstractLayer<
+  PropsType extends PropsBase,
+  NativePropsType,
+> extends React.PureComponent<PropsType> {
+  get baseProps(): PropsType {
+    return {
+      ...this.props,
+      id: this.props.id,
+      sourceID: this.props.sourceID,
+      reactStyle: this.getStyle(this.props.style),
+      minZoomLevel: this.props.minZoomLevel,
+      maxZoomLevel: this.props.maxZoomLevel,
+      aboveLayerID: this.props.aboveLayerID,
+      belowLayerID: this.props.belowLayerID,
+      layerIndex: this.props.layerIndex,
+      filter: getFilter(this.props.filter),
+      style: undefined,
+    };
+  }
+
+  nativeLayer:
+    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | undefined = undefined;
+
+  setNativeLayer(
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) {
+    this.nativeLayer = instance;
+  }
+
+  getStyleTypeFormatter(styleType: string) {
+    if (styleType === 'color') {
+      return processColor;
+    }
+  }
+
+  getStyle(style: AllLayerStyleProps) {
+    return transformStyle(style);
+  }
+
+  setNativeProps(props: { [key: string]: unknown }) {
+    if (this.nativeLayer) {
+      let propsToPass = props;
+      if (props.style) {
+        propsToPass = { ...props, reactStyle: this.getStyle(props.style) };
+      }
+      this.nativeLayer?.setNativeProps(propsToPass);
+    }
+  }
+}
+
+export default AbstractLayer;

package/javascript/components/BackgroundLayer.js

@@ -79,7 +79,7 @@ class BackgroundLayer extends AbstractLayer {
     return (
       <RCTMGLBackgroundLayer
         testID="rctmglBackgroundLayer"
-        ref="nativeLayer"
+        ref={this.setNativeLayer}
         {...this.baseProps}
       />
     );

package/javascript/components/Camera.tsx

@@ -9,11 +9,27 @@ import React, {
 import { NativeModules, requireNativeComponent } from 'react-native';
 import { Position } from '@turf/helpers';
 
-import { UserTrackingModeChangeCallback, UserTrackingMode } from '../types';
+import { MapboxGLEvent } from '../types';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
 
 const NativeModule = NativeModules.MGLModule;
 
+export const enum UserTrackingMode {
+  Follow = 'normal',
+  FollowWithHeading = 'compass',
+  FollowWithCourse = 'course',
+}
+
+export type UserTrackingModeChangeCallback = (
+  event: MapboxGLEvent<
+    'usertrackingmodechange',
+    {
+      followUserLocation: boolean;
+      followUserMode: UserTrackingMode | null;
+    }
+  >,
+) => void;
+
 /**
  * Converts the provided React Native animation mode into the corresponding native enum value.
  */

package/javascript/components/CircleLayer.js

@@ -83,7 +83,7 @@ class CircleLayer extends AbstractLayer {
     return (
       <RCTMGLCircleLayer
         testID="rctmglCircleLayer"
-        ref="nativeLayer"
+        ref={this.setNativeLayer}
         {...this.baseProps}
       />
     );

package/javascript/components/FillExtrusionLayer.js

@@ -83,7 +83,7 @@ class FillExtrusionLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillExtrusionLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/FillLayer.js

@@ -83,7 +83,7 @@ class FillLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/{HeadingIndicator.js → HeadingIndicator.tsx}

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import headingIcon from '../../assets/heading.png';
 
@@ -10,9 +9,13 @@ const style = {
   iconAllowOverlap: true,
   iconPitchAlignment: 'map',
   iconRotationAlignment: 'map',
+} as const;
+
+type Props = {
+  heading?: number;
 };
 
-const HeadingIndicator = (heading) => (
+const HeadingIndicator = ({ heading }: Props) => (
   <SymbolLayer
     key="mapboxUserLocationHeadingIndicator"
     id="mapboxUserLocationHeadingIndicator"
@@ -24,8 +27,4 @@ const HeadingIndicator = (heading) => (
   />
 );
 
-HeadingIndicator.propTypes = {
-  heading: PropTypes.number,
-};
-
 export default HeadingIndicator;

package/javascript/components/HeatmapLayer.js

@@ -84,7 +84,7 @@ class HeatmapLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLHeatmapLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/LineLayer.js

@@ -83,7 +83,7 @@ class LineLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLLineLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/MapView.js

@@ -215,22 +215,12 @@ class MapView extends NativeBridgeComponent(React.Component) {
     onRegionDidChange: PropTypes.func,
 
     /**
-     * iOS, v10 only, experimental.
-     *
-     * Called when the currently displayed map area changes.
-     * Replaces onRegionIsChanging, so can't set both
-     *
-     * @param {MapState} region - A payload containing the map center, bounds, and other properties.
+     * iOS, v10 only, deprecated will be removed in next version - please use onRegionIsChanging.
      */
     onCameraChanged: PropTypes.func,
 
     /**
-     * iOS, v10 only, experimental
-     *
-     * Called when the currently displayed map area stops changing.
-     * Replaces onRegionDidChange, so can't set both
-     *
-     * @param {MapState} region - A payload containing the map center, bounds, and other properties.
+     * iOS, v10 only, deprecated will be removed in next version - please use onRegionDidChange
      */
     onMapIdle: PropTypes.func,
 
@@ -393,6 +383,9 @@ class MapView extends NativeBridgeComponent(React.Component) {
       addIfHasHandler('DidFinishLoadingStyle');
 
       if (addIfHasHandler('MapIdle')) {
+        console.warn(
+          'onMapIdle is deprecated and will be removed in next beta - please use onRegionDidChange',
+        );
         if (props.onRegionDidChange) {
           console.warn(
             'rnmapbox/maps: only one of  MapView.onRegionDidChange or onMapIdle is supported',
@@ -400,6 +393,9 @@ class MapView extends NativeBridgeComponent(React.Component) {
         }
       }
       if (addIfHasHandler('CameraChanged')) {
+        console.warn(
+          'onCameraChanged is deprecated and will be removed in next beta - please use onRegionWillChange',
+        );
         if (props.onRegionWillChange) {
           console.warn(
             'rnmapbox/maps: only one of MapView.onRegionWillChange or onCameraChanged is supported',

package/javascript/components/RasterLayer.js

@@ -80,7 +80,7 @@ class RasterLayer extends AbstractLayer {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLRasterLayer ref="nativeLayer" {...props} />;
+    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 

package/javascript/components/SkyLayer.js

@@ -66,7 +66,7 @@ class SkyLayer extends AbstractLayer {
     return (
       <RCTMGLSkyLayer
         testID="rctmglSkyLayer"
-        ref="nativeLayer"
+        ref={this.setNativeLayer}
         {...this.baseProps}
       />
     );