@rnmapbox/maps 10.0.0-beta.69 → 10.0.0-beta.71

package/ios/RCTMGL-v10/RCTMGLStyle.swift

@@ -12,7 +12,7 @@ class RCTMGLStyle {
   }
 
 
-func fillLayer(layer: inout FillLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout FillLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func fillLayer(layer: inout FillLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout FillLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -52,35 +52,22 @@ func fillLayer(layer: inout FillLayer, reactStyle:Dictionary<String, Any>, apply
     } else if (prop == "fillTranslateAnchor") {
       self.setFillTranslateAnchor(&layer, styleValue:styleValue);
     } else if (prop == "fillPattern") {
-      if (!styleValue.shouldAddImage()) {
-        self.setFillPattern(&layer, styleValue:styleValue);
-      } else {
-        let imageURI = styleValue.getImageURI()
-
-        RCTMGLUtils.fetchImage(bridge!, url:imageURI, scale:styleValue.getImageScale(), callback:{ (error, image) in
-          if let image = image {
-            DispatchQueue.main.sync {
-              if (isValid()) {
-                logged("Fill.FillPattern.addImage") {
-                  try self.style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
-                  applyUpdater { (layer: inout FillLayer) in
-                    self.setFillPattern(&layer, styleValue:styleValue);
-                  }
-                }
-              }
-            }
-          } else {
-            Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
-          }
-        });
-      }
+      styleValue.setImage(
+        bridge: bridge!,
+        style: style,
+        oldValue: oldReactStyle?[prop],
+        setImageOnLayer: { (_) in self.setFillPattern(&layer, styleValue:styleValue) },
+        isLayerStillValid: isValid,
+        setImageOnLayerLater: { (_) in applyUpdater { (layer: inout FillLayer) in self.setFillPattern(&layer, styleValue: styleValue) } },
+        name: "Fill.\(prop)"
+      )
     } else {
       Logger.log(level:.error, message: "Unexpected property \(prop) for layer: fill")
     }
   }
 }
 
-func lineLayer(layer: inout LineLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout LineLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func lineLayer(layer: inout LineLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout LineLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -140,28 +127,15 @@ func lineLayer(layer: inout LineLayer, reactStyle:Dictionary<String, Any>, apply
     } else if (prop == "lineDasharray") {
       self.setLineDasharray(&layer, styleValue:styleValue);
     } else if (prop == "linePattern") {
-      if (!styleValue.shouldAddImage()) {
-        self.setLinePattern(&layer, styleValue:styleValue);
-      } else {
-        let imageURI = styleValue.getImageURI()
-
-        RCTMGLUtils.fetchImage(bridge!, url:imageURI, scale:styleValue.getImageScale(), callback:{ (error, image) in
-          if let image = image {
-            DispatchQueue.main.sync {
-              if (isValid()) {
-                logged("Line.LinePattern.addImage") {
-                  try self.style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
-                  applyUpdater { (layer: inout LineLayer) in
-                    self.setLinePattern(&layer, styleValue:styleValue);
-                  }
-                }
-              }
-            }
-          } else {
-            Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
-          }
-        });
-      }
+      styleValue.setImage(
+        bridge: bridge!,
+        style: style,
+        oldValue: oldReactStyle?[prop],
+        setImageOnLayer: { (_) in self.setLinePattern(&layer, styleValue:styleValue) },
+        isLayerStillValid: isValid,
+        setImageOnLayerLater: { (_) in applyUpdater { (layer: inout LineLayer) in self.setLinePattern(&layer, styleValue: styleValue) } },
+        name: "Line.\(prop)"
+      )
     } else if (prop == "lineGradient") {
       self.setLineGradient(&layer, styleValue:styleValue);
     } else if (prop == "lineTrimOffset") {
@@ -172,7 +146,7 @@ func lineLayer(layer: inout LineLayer, reactStyle:Dictionary<String, Any>, apply
   }
 }
 
-func symbolLayer(layer: inout SymbolLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout SymbolLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func symbolLayer(layer: inout SymbolLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout SymbolLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -212,28 +186,15 @@ func symbolLayer(layer: inout SymbolLayer, reactStyle:Dictionary<String, Any>, a
     } else if (prop == "iconTextFitPadding") {
       self.setIconTextFitPadding(&layer, styleValue:styleValue);
     } else if (prop == "iconImage") {
-      if (!styleValue.shouldAddImage()) {
-        self.setIconImage(&layer, styleValue:styleValue);
-      } else {
-        let imageURI = styleValue.getImageURI()
-
-        RCTMGLUtils.fetchImage(bridge!, url:imageURI, scale:styleValue.getImageScale(), callback:{ (error, image) in
-          if let image = image {
-            DispatchQueue.main.sync {
-              if (isValid()) {
-                logged("Symbol.IconImage.addImage") {
-                  try self.style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
-                  applyUpdater { (layer: inout SymbolLayer) in
-                    self.setIconImage(&layer, styleValue:styleValue);
-                  }
-                }
-              }
-            }
-          } else {
-            Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
-          }
-        });
-      }
+      styleValue.setImage(
+        bridge: bridge!,
+        style: style,
+        oldValue: oldReactStyle?[prop],
+        setImageOnLayer: { (_) in self.setIconImage(&layer, styleValue:styleValue) },
+        isLayerStillValid: isValid,
+        setImageOnLayerLater: { (_) in applyUpdater { (layer: inout SymbolLayer) in self.setIconImage(&layer, styleValue: styleValue) } },
+        name: "Symbol.\(prop)"
+      )
     } else if (prop == "iconRotate") {
       self.setIconRotate(&layer, styleValue:styleValue);
     } else if (prop == "iconPadding") {
@@ -350,7 +311,7 @@ func symbolLayer(layer: inout SymbolLayer, reactStyle:Dictionary<String, Any>, a
   }
 }
 
-func circleLayer(layer: inout CircleLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout CircleLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func circleLayer(layer: inout CircleLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout CircleLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -413,7 +374,7 @@ func circleLayer(layer: inout CircleLayer, reactStyle:Dictionary<String, Any>, a
   }
 }
 
-func heatmapLayer(layer: inout HeatmapLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout HeatmapLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func heatmapLayer(layer: inout HeatmapLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout HeatmapLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -452,7 +413,7 @@ func heatmapLayer(layer: inout HeatmapLayer, reactStyle:Dictionary<String, Any>,
   }
 }
 
-func fillExtrusionLayer(layer: inout FillExtrusionLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout FillExtrusionLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func fillExtrusionLayer(layer: inout FillExtrusionLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout FillExtrusionLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -484,28 +445,15 @@ func fillExtrusionLayer(layer: inout FillExtrusionLayer, reactStyle:Dictionary<S
     } else if (prop == "fillExtrusionTranslateAnchor") {
       self.setFillExtrusionTranslateAnchor(&layer, styleValue:styleValue);
     } else if (prop == "fillExtrusionPattern") {
-      if (!styleValue.shouldAddImage()) {
-        self.setFillExtrusionPattern(&layer, styleValue:styleValue);
-      } else {
-        let imageURI = styleValue.getImageURI()
-
-        RCTMGLUtils.fetchImage(bridge!, url:imageURI, scale:styleValue.getImageScale(), callback:{ (error, image) in
-          if let image = image {
-            DispatchQueue.main.sync {
-              if (isValid()) {
-                logged("FillExtrusion.FillExtrusionPattern.addImage") {
-                  try self.style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
-                  applyUpdater { (layer: inout FillExtrusionLayer) in
-                    self.setFillExtrusionPattern(&layer, styleValue:styleValue);
-                  }
-                }
-              }
-            }
-          } else {
-            Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
-          }
-        });
-      }
+      styleValue.setImage(
+        bridge: bridge!,
+        style: style,
+        oldValue: oldReactStyle?[prop],
+        setImageOnLayer: { (_) in self.setFillExtrusionPattern(&layer, styleValue:styleValue) },
+        isLayerStillValid: isValid,
+        setImageOnLayerLater: { (_) in applyUpdater { (layer: inout FillExtrusionLayer) in self.setFillExtrusionPattern(&layer, styleValue: styleValue) } },
+        name: "FillExtrusion.\(prop)"
+      )
     } else if (prop == "fillExtrusionHeight") {
       self.setFillExtrusionHeight(&layer, styleValue:styleValue);
     } else if (prop == "fillExtrusionHeightTransition") {
@@ -522,7 +470,7 @@ func fillExtrusionLayer(layer: inout FillExtrusionLayer, reactStyle:Dictionary<S
   }
 }
 
-func rasterLayer(layer: inout RasterLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout RasterLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func rasterLayer(layer: inout RasterLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout RasterLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -573,7 +521,7 @@ func rasterLayer(layer: inout RasterLayer, reactStyle:Dictionary<String, Any>, a
   }
 }
 
-func hillshadeLayer(layer: inout HillshadeLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout HillshadeLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func hillshadeLayer(layer: inout HillshadeLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout HillshadeLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -616,7 +564,7 @@ func hillshadeLayer(layer: inout HillshadeLayer, reactStyle:Dictionary<String, A
   }
 }
 
-func backgroundLayer(layer: inout BackgroundLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout BackgroundLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func backgroundLayer(layer: inout BackgroundLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout BackgroundLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -638,28 +586,15 @@ func backgroundLayer(layer: inout BackgroundLayer, reactStyle:Dictionary<String,
     } else if (prop == "backgroundColorTransition") {
       self.setBackgroundColorTransition(&layer, styleValue:styleValue);
     } else if (prop == "backgroundPattern") {
-      if (!styleValue.shouldAddImage()) {
-        self.setBackgroundPattern(&layer, styleValue:styleValue);
-      } else {
-        let imageURI = styleValue.getImageURI()
-
-        RCTMGLUtils.fetchImage(bridge!, url:imageURI, scale:styleValue.getImageScale(), callback:{ (error, image) in
-          if let image = image {
-            DispatchQueue.main.sync {
-              if (isValid()) {
-                logged("Background.BackgroundPattern.addImage") {
-                  try self.style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
-                  applyUpdater { (layer: inout BackgroundLayer) in
-                    self.setBackgroundPattern(&layer, styleValue:styleValue);
-                  }
-                }
-              }
-            }
-          } else {
-            Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
-          }
-        });
-      }
+      styleValue.setImage(
+        bridge: bridge!,
+        style: style,
+        oldValue: oldReactStyle?[prop],
+        setImageOnLayer: { (_) in self.setBackgroundPattern(&layer, styleValue:styleValue) },
+        isLayerStillValid: isValid,
+        setImageOnLayerLater: { (_) in applyUpdater { (layer: inout BackgroundLayer) in self.setBackgroundPattern(&layer, styleValue: styleValue) } },
+        name: "Background.\(prop)"
+      )
     } else if (prop == "backgroundOpacity") {
       self.setBackgroundOpacity(&layer, styleValue:styleValue);
     } else if (prop == "backgroundOpacityTransition") {
@@ -670,7 +605,7 @@ func backgroundLayer(layer: inout BackgroundLayer, reactStyle:Dictionary<String,
   }
 }
 
-func skyLayer(layer: inout SkyLayer, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout SkyLayer)->Void)->Void, isValid: @escaping () -> Bool)
+func skyLayer(layer: inout SkyLayer, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout SkyLayer)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -713,7 +648,7 @@ func skyLayer(layer: inout SkyLayer, reactStyle:Dictionary<String, Any>, applyUp
   }
 }
 
-func lightLayer(layer: inout Light, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout Light)->Void)->Void, isValid: @escaping () -> Bool)
+func lightLayer(layer: inout Light, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout Light)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -748,7 +683,7 @@ func lightLayer(layer: inout Light, reactStyle:Dictionary<String, Any>, applyUpd
   }
 }
 
-func atmosphereLayer(layer: inout Atmosphere, reactStyle:Dictionary<String, Any>, applyUpdater: @escaping  ((inout Atmosphere)->Void)->Void, isValid: @escaping () -> Bool)
+func atmosphereLayer(layer: inout Atmosphere, reactStyle:Dictionary<String, Any>, oldReactStyle:Dictionary<String, Any>?, applyUpdater: @escaping  ((inout Atmosphere)->Void)->Void, isValid: @escaping () -> Bool)
 {
   guard self._hasReactStyle(reactStyle) else {
     Logger.log(level:.error, message: "Invalid style: \(reactStyle)")
@@ -793,7 +728,7 @@ 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)
+func terrainLayer(layer: inout Terrain, reactStyle:Dictionary<String, Any>, oldReactStyle: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)")

package/ios/RCTMGL-v10/RCTMGLStyleValue.swift

@@ -398,13 +398,59 @@ class RCTMGLStyleValue {
     return false
   }
   
+  func setImage(
+    bridge: RCTBridge,
+    style: Style,
+    oldValue: Any?,
+    setImageOnLayer: (_: RCTMGLStyleValue) -> Void,
+    isLayerStillValid: @escaping () -> Bool, // check if layer/map still valid in case we try to set the image after downloaded
+    setImageOnLayerLater: @escaping (_: RCTMGLStyleValue) -> Void, // called in case we need to set the image later just after downloaded
+    name: String
+  ) {
+    if (!shouldAddImage()) {
+      setImageOnLayer(self)
+    } else {
+      let imageURI = getImageURI()
+      
+      if let oldRawValue = oldValue as? [String:Any] {
+        if let oldRawValue = oldRawValue["stylevalue"] as? [String:Any] {
+          if let oldValue = parse(rawStyleValue: oldRawValue) as? [String:Any] {
+            if getImageURI(oldValue) == imageURI {
+              setImageOnLayer(self)
+              return
+            }
+          }
+        }
+      }
+
+      RCTMGLUtils.fetchImage(bridge, url:imageURI, scale:getImageScale(), callback:{ (error, image) in
+        if let image = image {
+          DispatchQueue.main.sync {
+            if (isLayerStillValid()) {
+              logged("\(name).addImage") {
+                try style.addImage(image, id:imageURI!, stretchX: [], stretchY: []);
+                setImageOnLayerLater(self)
+              }
+            }
+          }
+        } else {
+          Logger.log(level: .error, message: "Error during fetchImage: \(optional: error)")
+        }
+      });
+    }
+  }
+  
+  func getImageURI(_ dict: [String:Any]) -> String? {
+    if let uri = dict["uri"] as? String {
+      return uri
+    } else {
+      return nil
+    }
+  }
+  
   func getImageURI() -> String? {
     if let dict = styleObject as? [String:Any] {
-      if let uri = dict["uri"] as? String {
-        return uri
-      } else {
-        return nil
-      }
+      return getImageURI(dict)
     } else if let uri = styleObject as? String {
       return uri
     }

package/ios/RCTMGL-v10/RCTMGLSymbolLayer.swift

@@ -35,6 +35,7 @@ class RCTMGLSymbolLayer: RCTMGLVectorLayer {
         styler.symbolLayer(
           layer: &styleLayer,
           reactStyle: reactStyle,
+          oldReactStyle: oldReatStyle,
           applyUpdater: { (updater) in logged("RCTMGLSymbolLayer.updateLayer") {
             try style.updateLayer(withId: self.id, type: LayerType.self) { (layer: inout LayerType) in updater(&layer) }
           }},

package/ios/RCTMGL-v10/RCTMGLTerrain.swift

@@ -73,6 +73,7 @@ class RCTMGLTerrain : RCTMGLSingletonLayer, RCTMGLMapComponent, RCTMGLSourceCons
         styler.terrainLayer(
           layer: &terrain,
           reactStyle: reactStyle,
+          oldReactStyle: oldReactStyle,
           applyUpdater: { (updater) in fatalError("Terrain: TODO - implement apply updater")},
           isValid: { fatalError("Terrain: TODO - no isValid") }
         )

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/Images.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { requireNativeComponent, Image } from 'react-native';
+import { ImageSourcePropType, ImageResolvedAssetSource } from 'react-native';
+
+import { ShapeSource } from './ShapeSource';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImages';
+
+export type RNMBEvent<PayloadType = { [key: string]: string }> = {
+  payload: PayloadType;
+  type: string;
+};
+
+function _isUrlOrPath(value: string | ImageSourcePropType): value is string {
+  return (
+    (typeof value === 'string' || value instanceof String) &&
+    (value.startsWith('file://') ||
+      value.startsWith('http://') ||
+      value.startsWith('https://') ||
+      value.startsWith('data:') ||
+      value.startsWith('asset://') ||
+      value.startsWith('/'))
+  );
+}
+
+type NativeImage =
+  | string
+  | {
+      name: string;
+      sdf?: boolean;
+      strechX: [number, number][];
+      streacY: [number, number][];
+    };
+
+interface Props {
+  /**
+   * Specifies the external images in key-value pairs required for the shape source.
+   * Keys are names - see iconImage expressions, values can be either urls-s objects
+   * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
+   */
+  images?: { [key: string]: ImageSourcePropType };
+
+  /**
+   * If you have an asset under Image.xcassets on iOS and the drawables directory on android
+   * you can specify an array of string names with assets as the key `['pin']`.
+   * Additionally object with keys sdf, and strechX, strechY is supported for [SDF icons](https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-mapbox-maps/)
+   */
+  nativeAssetImages?: NativeImage[];
+
+  /**
+   * Gets called when a Layer is trying to render an image whose key is not present in
+   * any of the `Images` component of the Map.
+   */
+  onImageMissing?: (imageKey: string) => void;
+
+  id?: string;
+  children?: React.ReactElement;
+}
+
+/**
+ * Images defines the images used in Symbol etc. layers.
+ */
+class Images extends React.Component<Props> {
+  static NATIVE_ASSETS_KEY = 'assets';
+
+  _getImages() {
+    if (!this.props.images && !this.props.nativeAssetImages) {
+      return {};
+    }
+
+    const images: { [key: string]: string | ImageResolvedAssetSource } = {};
+    let nativeImages: NativeImage[] = [];
+
+    if (this.props.images) {
+      const imageNames = Object.keys(this.props.images);
+      for (const imageName of imageNames) {
+        const value = this.props.images[imageName];
+        if (
+          imageName === ShapeSource.NATIVE_ASSETS_KEY &&
+          Array.isArray(value)
+        ) {
+          console.error(
+            `Use of ${ShapeSource.NATIVE_ASSETS_KEY} in Images#images is not supported use Images#nativeAssetImages`,
+          );
+        } else if (_isUrlOrPath(value)) {
+          images[imageName] = value;
+        } else {
+          const res = Image.resolveAssetSource(value);
+          if (res && res.uri) {
+            images[imageName] = res;
+          }
+        }
+      }
+    }
+
+    if (this.props.nativeAssetImages) {
+      nativeImages = this.props.nativeAssetImages;
+    }
+
+    return {
+      images,
+      nativeImages,
+    };
+  }
+
+  _onImageMissing(event: React.SyntheticEvent<Element, RNMBEvent>) {
+    if (this.props.onImageMissing) {
+      this.props.onImageMissing(event.nativeEvent.payload.imageKey);
+    }
+  }
+
+  render() {
+    const props = {
+      id: this.props.id,
+      hasOnImageMissing: !!this.props.onImageMissing,
+      onImageMissing: this._onImageMissing.bind(this),
+      ...this._getImages(),
+    };
+
+    return <RCTMGLImages {...props}>{this.props.children}</RCTMGLImages>;
+  }
+}
+
+type NativeProps = {
+  hasOnImageMissing: boolean;
+  onImageMissing?: (event: React.SyntheticEvent<Element, RNMBEvent>) => void;
+  images?: { [key: string]: string | ImageResolvedAssetSource };
+  nativeImages?: NativeImage[];
+};
+
+const RCTMGLImages = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default Images;

package/javascript/components/MapView.js

@@ -248,10 +248,15 @@ class MapView extends NativeBridgeComponent(
     onDidFinishLoadingMap: PropTypes.func,
 
     /**
-     * This event is triggered when the map has failed to load a new map style.
+     * This event is triggered when the map has failed to load a new map style. On v10 it's deprecated and replaced by onMapLoadingError
      */
     onDidFailLoadingMap: PropTypes.func,
 
+    /**
+     * This event is tiggered when there is an error during map load. V10 only, replaces onDidFailLoadingMap, might be called multiple times and not exclusive with onDidFinishLoadingMap.
+     */
+    onMapLoadingError: PropTypes.func,
+
     /**
      * This event is triggered when the map will start rendering a frame.
      */
@@ -372,7 +377,13 @@ class MapView extends NativeBridgeComponent(
       function addIfHasHandler(name) {
         if (props[`on${name}`] != null) {
           if (MapboxGL.EventTypes[name] == null) {
-            console.warn(`rnmapbox maps: ${name} is not supported`);
+            if (name === 'DidFailLoadingMap') {
+              console.warn(
+                `rnmapbox maps: on${name} is deprecated, please use onMapLoadingError`,
+              );
+            } else {
+              console.warn(`rnmapbox maps: ${name} is not supported`);
+            }
           } else {
             events.push(MapboxGL.EventTypes[name]);
             return true;
@@ -387,6 +398,7 @@ class MapView extends NativeBridgeComponent(
       addIfHasHandler('UserLocationUpdate');
       addIfHasHandler('WillStartLoadingMap');
       addIfHasHandler('DidFinishLoadingMap');
+      addIfHasHandler('MapLoadingError');
       addIfHasHandler('DidFailLoadingMap');
       addIfHasHandler('WillStartRenderingFrame');
       addIfHasHandler('DidFinishRenderingFrame');
@@ -700,6 +712,7 @@ class MapView extends NativeBridgeComponent(
       this.props;
     const { type, payload } = e.nativeEvent;
     let propName = '';
+    let deprecatedPropName = '';
 
     switch (type) {
       case MapboxGL.EventTypes.RegionWillChange:
@@ -737,6 +750,10 @@ class MapView extends NativeBridgeComponent(
       case MapboxGL.EventTypes.DidFailLoadingMap:
         propName = 'onDidFailLoadingMap';
         break;
+      case MapboxGL.EventTypes.MapLoadingError:
+        propName = 'onMapLoadingError';
+        deprecatedPropName = 'onDidFailLoadingMap';
+        break;
       case MapboxGL.EventTypes.WillStartRenderingFrame:
         propName = 'onWillStartRenderingFrame';
         break;
@@ -765,6 +782,9 @@ class MapView extends NativeBridgeComponent(
     if (propName.length) {
       this._handleOnChange(propName, payload);
     }
+    if (deprecatedPropName.length) {
+      this._handleOnChange(deprecatedPropName, payload);
+    }
   }
 
   _onLayout(e) {