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

package/android/install.md

@@ -10,7 +10,7 @@
 
 Add `RNMapboxMapsImpl = "mapbox"` to your gradle file - see bellow for details.
 
-### Custom versions
+### Setting RNMapboxMapsImpl to v10
 
 *Warning*: If you set a custom version, make sure you revisit, any time you update @rnmapbox/maps. Setting it to earlier version than what we exepect will likely result in a build error.
 
@@ -22,6 +22,53 @@ buildscript {
     ext {
         // ...
         RNMapboxMapsImpl = "mapbox" // required for v10
+    }
+}
+```
+
+### Adding mapbox maven repo
+
+You will need to authorize your download of the Maps SDK via a secret access token with the `DOWNLOADS:READ` scope.  
+This [guide](https://docs.mapbox.com/android/maps/guides/install/#configure-credentials) explains how to `Configure credentials` and `Configure your secret token`.
+
+Then under section `allprojects/repositories` add your data:
+
+```groovy
+// android/build.gradle
+
+allprojects {
+    repositories {
+        // ...other repos
+        maven {
+            url 'https://api.mapbox.com/downloads/v2/releases/maven'
+            authentication {
+                basic(BasicAuthentication)
+            }
+            credentials {
+                // Do not change the username below.
+                // This should always be `mapbox` (not your username).
+                username = 'mapbox'
+                // Use the secret token you stored in gradle.properties as the password
+                password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
+            }
+        }
+        // ...even more repos?
+    }
+}
+```
+
+### Using non default mapbox version
+
+*Warning*: If you set a custom version, make sure you revisit, any time you update @rnmapbox/maps. Setting it to earlier version than what we exepect will likely result in a build error.
+
+Set `RNMapboxMapsLibs` in `android/build.gradle > buildscript > ext` section
+
+
+```groovy
+buildscript {
+    ext {
+        // ...
+        RNMapboxMapsImpl = "mapbox"
 
         RNMapboxMapsLibs = { // optional - only required if you want to customize it
             implementation 'com.mapbox.maps:android:10.6.0'
@@ -32,6 +79,7 @@ buildscript {
 ```
 
 
+
 If you see `2 files found with path 'lib/arm64-v8a/libc++_shared.so' from inputs` issue see [possible workaround](#workaround-for-2-files-found-with-path-libarm64-v8alibc_sharedso-from-inputs).
 
 ## Using MapLibre

package/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/camera/CameraStop.java

@@ -162,10 +162,10 @@ public class CameraStop {
 
         // scale padding by pixel ratio
         DisplayMetrics metrics = context.getResources().getDisplayMetrics();
-        paddingTop = Float.valueOf(paddingTop * metrics.scaledDensity).intValue();
-        paddingRight = Float.valueOf(paddingRight * metrics.scaledDensity).intValue();
-        paddingBottom = Float.valueOf(paddingBottom * metrics.scaledDensity).intValue();
-        paddingLeft = Float.valueOf(paddingLeft * metrics.scaledDensity).intValue();
+        paddingTop = Float.valueOf(paddingTop * metrics.density).intValue();
+        paddingRight = Float.valueOf(paddingRight * metrics.density).intValue();
+        paddingBottom = Float.valueOf(paddingBottom * metrics.density).intValue();
+        paddingLeft = Float.valueOf(paddingLeft * metrics.density).intValue();
 
         stop.setPadding(
                 paddingLeft,

package/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.java

@@ -326,9 +326,9 @@ public class RCTMGLMapView extends MapView implements OnMapReadyCallback, Mapbox
         int[] contentPadding = mMap.getPadding();
 
         int mapWidth = (int) ((mMap.getWidth() * 0.75 - (contentPadding[0] + contentPadding[2]))
-                / metrics.scaledDensity);
+                / metrics.density);
         int mapHeight = (int) ((mMap.getHeight() * 0.75 - (contentPadding[1] + contentPadding[3]))
-                / metrics.scaledDensity);
+                / metrics.density);
         VisibleRegion region = GeoViewport.getRegion(center, (int) zoomLevel, mapWidth, mapHeight);
         return region;
     }
@@ -1246,7 +1246,7 @@ public class RCTMGLMapView extends MapView implements OnMapReadyCallback, Mapbox
 
         final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
 
-        double[] result = {left * metrics.scaledDensity, top * metrics.scaledDensity, right * metrics.scaledDensity, bottom * metrics.scaledDensity};
+        double[] result = {left * metrics.density, top * metrics.density, right * metrics.density, bottom * metrics.density};
         return result;
     }
 

package/android/rctmgl/src/main/java-mapboxgl/common/com/mapbox/rctmgl/modules/RCTMGLSnapshotModule.java

@@ -107,7 +107,7 @@ public class RCTMGLSnapshotModule extends ReactContextBaseJavaModule {
 
         options.withLogo(jsOptions.getBoolean("withLogo"));
         options.withStyle(jsOptions.getString("styleURL"));
-        options.withPixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().scaledDensity).intValue());
+        options.withPixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().density).intValue());
 
         if (jsOptions.hasKey("bounds")) {
             FeatureCollection bounds = FeatureCollection.fromJson(jsOptions.getString("bounds"));

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/camera/CameraStop.kt

@@ -162,10 +162,10 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
             }
             if (readableMap.hasKey("bounds")) {
                 val metrics = context.resources.displayMetrics
-                var paddingTop = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingTop")
-                var paddingRight = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingRight")
-                var paddingBottom = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingBottom")
-                var paddingLeft = getBoundsPaddingByKey(readableMap, metrics.scaledDensity, "paddingLeft")
+                var paddingTop = getBoundsPaddingByKey(readableMap, metrics.density, "paddingTop")
+                var paddingRight = getBoundsPaddingByKey(readableMap, metrics.density, "paddingRight")
+                var paddingBottom = getBoundsPaddingByKey(readableMap, metrics.density, "paddingBottom")
+                var paddingLeft = getBoundsPaddingByKey(readableMap, metrics.density, "paddingLeft")
 
                 val collection = FeatureCollection.fromJson(readableMap.getString("bounds")!!)
                 stop.setBounds(
@@ -213,9 +213,9 @@ import com.mapbox.mapboxsdk.maps.MapboxMap;
             return intArrayOf(resultLeft, resultTop, resultRight, resultBottom)
         }
 
-        private fun getBoundsPaddingByKey(map: ReadableMap, scaledDensity: Float, key: String): Int? {
+        private fun getBoundsPaddingByKey(map: ReadableMap, density: Float, key: String): Int? {
             if (map.hasKey(key)) {
-                return (map.getInt(key) * scaledDensity).toInt()
+                return (map.getInt(key) * density).toInt()
             } else {
                 return null;
             }

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/modules/RCTMGLSnapshotModule.java

@@ -132,7 +132,7 @@ public class RCTMGLSnapshotModule extends ReactContextBaseJavaModule {
                         (int) jsOptions.getDouble("height")
                 )
         );
-        builder.pixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().scaledDensity).intValue());
+        builder.pixelRatio(Float.valueOf(mContext.getResources().getDisplayMetrics().density).intValue());
 
         builder.resourceOptions(new ResourceOptions.Builder().accessToken(RCTMGLModule.getAccessToken(mContext)).build());
         return builder.build();

package/docs/ShapeSource.md

@@ -1,4 +1,4 @@
-<!-- This file was autogenerated from ShapeSource.js do not modify -->
+<!-- This file was autogenerated from ShapeSource.tsx do not modify -->
 # <MapboxGL.ShapeSource />
 ShapeSource is a map content source that supplies vector shapes to be shown on the map.
 The shape may be an url or a GeoJSON object
@@ -8,19 +8,23 @@ The shape may be an url or a GeoJSON object
 | ---- | :-- | :----- | :------ | :---------- |
 | id | `string` | `MapboxGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
 | url | `string` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle. |
-| shape | `object` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection. |
-| cluster | `bool` | `none` | `false` | Enables clustering on the source for point shapes. |
+| shape | `\| GeoJSON.GeometryCollection
+\| GeoJSON.Feature
+\| GeoJSON.FeatureCollection
+\| GeoJSON.Geometry` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection. |
+| cluster | `boolean` | `none` | `false` | Enables clustering on the source for point shapes. |
 | clusterRadius | `number` | `none` | `false` | Specifies the radius of each cluster if clustering is enabled.<br/>A value of 512 produces a radius equal to the width of a tile.<br/>The default value is 50. |
 | clusterMaxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to cluster points if clustering is enabled.<br/>Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,<br/>the shapes are not clustered. |
 | clusterProperties | `object` | `none` | `false` | [`mapbox-gl` (v8) implementation only]<br/>Specifies custom properties on the generated clusters if clustering<br/>is enabled, aggregating values from clustered points.<br/><br/>Has the form `{ "property_name": [operator, map_expression]}`, where<br/> `operator` is a custom reduce expression that references a special `["accumulated"]` value -<br/>  it accumulates the property value from clusters/points the cluster contains<br/> `map_expression` produces the value of a single point<br/><br/>Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }` |
 | maxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to create vector tiles.<br/>A greater value produces greater detail at high zoom levels.<br/>The default value is 18. |
 | buffer | `number` | `none` | `false` | Specifies the size of the tile buffer on each side.<br/>A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.<br/>Larger values produce fewer rendering artifacts near tile edges and slower performance.<br/>The default value is 128. |
 | tolerance | `number` | `none` | `false` | Specifies the Douglas-Peucker simplification tolerance.<br/>A greater value produces simpler geometries and improves performance.<br/>The default value is 0.375. |
-| lineMetrics | `bool` | `none` | `false` | Whether to calculate line distance metrics.<br/>This is required for line layers that specify lineGradient values.<br/>The default value is false. |
-| onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only<br/>if that layer has a higher z-index than another source layers |
+| lineMetrics | `boolean` | `none` | `false` | Whether to calculate line distance metrics.<br/>This is required for line layers that specify lineGradient values.<br/>The default value is false. |
+| onPress | `func` | `none` | `false` | Source press listener, gets called when a user presses one of the children layers only<br/>if that layer has a higher z-index than another source layers<br/><br/>@param {Object} event<br/>@param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)<br/>@param {Object} event.coordinates - the coordinates of the click<br/>@param {Object} event.point - the point of the click<br/>@return void<br/>*signature:*`(event:{features: Array, coordinates: {latitude: number, longitude: number}, point: {x: number, y: number}}) => void` |
 | hitbox | `shape` | `none` | `false` | Overrides the default touch hitbox(44x44 pixels) for the source layers |
 | &nbsp;&nbsp;width | `number` | `none` | `true` | `width` of hitbox |
 | &nbsp;&nbsp;height | `number` | `none` | `true` | `height` of hitbox |
+| children | `React.ReactElement \| React.ReactElement[]` | `none` | `true` | FIX ME NO DESCRIPTION |
 
 ## methods
 ### features([filter])
@@ -46,7 +50,7 @@ Returns the zoom needed to expand the cluster.
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `feature` | `Feature` | `Yes` | The feature cluster to expand. |
+| `feature` | `string \| GeoJSON.Feature` | `Yes` | The feature cluster to expand. |
 
 
 
@@ -62,7 +66,7 @@ Returns the FeatureCollection from the cluster.
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `feature` | `Feature` | `Yes` | The feature cluster to expand. |
+| `feature` | `number \| GeoJSON.Feature` | `Yes` | The feature cluster to expand. |
 | `limit` | `number` | `Yes` | The number of points to return. |
 | `offset` | `number` | `Yes` | The amount of points to skip (for pagination). |
 
@@ -80,7 +84,7 @@ Returns the FeatureCollection from the cluster (on the next zoom level).
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `feature` | `Feature` | `Yes` | The feature cluster to expand. |
+| `feature` | `number \| GeoJSON.Feature` | `Yes` | The feature cluster to expand. |
 
 
 
@@ -96,7 +100,7 @@ const collection = await shapeSource.getClusterChildren(clusterId);
 #### arguments
 | Name | Type | Required | Description  |
 | ---- | :--: | :------: | :----------: |
-| `event` | `n/a` | `Yes` | undefined |
+| `event` | `NativeSyntheticEvent` | `Yes` | undefined |
 
 
 

package/docs/docs.json

@@ -3820,7 +3820,7 @@
             "name": "feature",
             "description": "The feature cluster to expand.",
             "type": {
-              "name": "Feature"
+              "name": "string \\| GeoJSON.Feature"
             },
             "optional": false
           }
@@ -3828,7 +3828,13 @@
         "returns": {
           "description": null,
           "type": {
-            "name": "number"
+            "name": "Promise",
+            "elements": [
+              {
+                "name": "string"
+              }
+            ],
+            "raw": "Promise<string>"
           }
         },
         "description": "Returns the zoom needed to expand the cluster.",
@@ -3838,7 +3844,7 @@
       },
       {
         "name": "getClusterLeaves",
-        "docblock": "Returns the FeatureCollection from the cluster.\n\n@example\nconst collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);\n\n@param  {Feature} feature - The feature cluster to expand.\n@param  {number} limit - The number of points to return.\n@param  {number} offset - The amount of points to skip (for pagination).\n@return {FeatureCollection}",
+        "docblock": "Returns the FeatureCollection from the cluster.\n\n@example\nconst collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);\n\n@param  {GeoJSON.Feature} feature - The feature cluster to expand.\n@param  {number} limit - The number of points to return.\n@param  {number} offset - The amount of points to skip (for pagination).\n@return {FeatureCollection}",
         "modifiers": [
           "async"
         ],
@@ -3847,7 +3853,7 @@
             "name": "feature",
             "description": "The feature cluster to expand.",
             "type": {
-              "name": "Feature"
+              "name": "number \\| GeoJSON.Feature"
             },
             "optional": false
           },
@@ -3881,7 +3887,7 @@
       },
       {
         "name": "getClusterChildren",
-        "docblock": "Returns the FeatureCollection from the cluster (on the next zoom level).\n\n@example\nconst collection = await shapeSource.getClusterChildren(clusterId);\n\n@param  {Feature} feature - The feature cluster to expand.\n@return {FeatureCollection}",
+        "docblock": "Returns the FeatureCollection from the cluster (on the next zoom level).\n\n@example\nconst collection = await shapeSource.getClusterChildren(clusterId);\n\n@param  {GeoJSON.Feature} feature - The feature cluster to expand.\n@return {FeatureCollection}",
         "modifiers": [
           "async"
         ],
@@ -3890,7 +3896,7 @@
             "name": "feature",
             "description": "The feature cluster to expand.",
             "type": {
-              "name": "Feature"
+              "name": "number \\| GeoJSON.Feature"
             },
             "optional": false
           }
@@ -3915,7 +3921,7 @@
             "name": "event",
             "optional": false,
             "type": {
-              "name": null
+              "name": "NativeSyntheticEvent"
             }
           }
         ],
@@ -3940,14 +3946,14 @@
       {
         "name": "shape",
         "required": false,
-        "type": "object",
+        "type": "\\| GeoJSON.GeometryCollection\n\\| GeoJSON.Feature\n\\| GeoJSON.FeatureCollection\n\\| GeoJSON.Geometry",
         "default": "none",
         "description": "The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection."
       },
       {
         "name": "cluster",
         "required": false,
-        "type": "bool",
+        "type": "boolean",
         "default": "none",
         "description": "Enables clustering on the source for point shapes."
       },
@@ -3996,59 +4002,19 @@
       {
         "name": "lineMetrics",
         "required": false,
-        "type": "bool",
+        "type": "boolean",
         "default": "none",
         "description": "Whether to calculate line distance metrics.\nThis is required for line layers that specify lineGradient values.\nThe default value is false."
       },
       {
         "name": "onPress",
         "required": false,
-        "type": "func",
+        "type": {
+          "name": "func",
+          "funcSignature": "(event:{features: Array, coordinates: {latitude: number, longitude: number}, point: {x: number, y: number}}) => void"
+        },
         "default": "none",
-        "description": "Source press listener, gets called when a user presses one of the children layers only\nif that layer has a higher z-index than another source layers",
-        "params": [
-          {
-            "name": "event",
-            "description": null,
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          },
-          {
-            "name": "event.features",
-            "description": "the geojson features that have hit by the press (might be multiple)",
-            "type": {
-              "name": "Array",
-              "elements": [
-                {
-                  "name": "Object"
-                }
-              ]
-            },
-            "optional": false
-          },
-          {
-            "name": "event.coordinates",
-            "description": "the coordinates of the click",
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          },
-          {
-            "name": "event.point",
-            "description": "the point of the click",
-            "type": {
-              "name": "Object"
-            },
-            "optional": false
-          }
-        ],
-        "returns": {
-          "description": "void",
-          "type": null
-        }
+        "description": "Source press listener, gets called when a user presses one of the children layers only\nif that layer has a higher z-index than another source layers\n\n@param {Object} event\n@param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)\n@param {Object} event.coordinates - the coordinates of the click\n@param {Object} event.point - the point of the click\n@return void\n*signature:*`(event:{features: Array, coordinates: {latitude: number, longitude: number}, point: {x: number, y: number}}) => void`"
       },
       {
         "name": "hitbox",
@@ -4074,12 +4040,16 @@
         },
         "default": "none",
         "description": "Overrides the default touch hitbox(44x44 pixels) for the source layers"
+      },
+      {
+        "name": "children",
+        "required": true,
+        "type": "React.ReactElement \\| React.ReactElement[]",
+        "default": "none",
+        "description": "FIX ME NO DESCRIPTION"
       }
     ],
-    "composes": [
-      "../utils"
-    ],
-    "fileNameWithExt": "ShapeSource.js",
+    "fileNameWithExt": "ShapeSource.tsx",
     "name": "ShapeSource"
   },
   "SkyLayer": {

package/index.d.ts

@@ -43,6 +43,10 @@ import {
   SymbolLayer as _SymbolLayer,
   Props as _SymbolLayerProps,
 } from './javascript/components/SymbolLayer';
+import {
+  ShapeSource as _ShapeSource,
+  Props as _ShapeSourceProps,
+} from './javascript/components/ShapeSource';
 import type {
   MapboxGLEvent as _MapboxGLEvent,
   AnimatedPoint as _AnimatedPoint,
@@ -148,6 +152,7 @@ declare namespace MapboxGL {
   const MarkerView = _MarkerView;
   const PointAnnotation = _PointAnnotation;
   const SymbolLayer = _SymbolLayer;
+  const ShapeSource = _ShapeSource;
 
   type MapboxGLEvent = _MapboxGLEvent;
   type UserTrackingMode = _UserTrackingMode;
@@ -244,7 +249,7 @@ declare namespace MapboxGL {
 
   namespace Animated {
     // sources
-    class ShapeSource extends Component<ShapeSourceProps> {}
+    class ShapeSource extends Component<_ShapeSourceProps> {}
     class ImageSource extends Component<ImageSourceProps> {}
 
     // layers
@@ -364,33 +369,6 @@ declare namespace MapboxGL {
    * Sources
    */
   class VectorSource extends Component<VectorSourceProps> {}
-  class ShapeSource extends Component<ShapeSourceProps> {
-    features(
-      filter?: Expression,
-    ): Promise<FeatureCollection<Geometry, Properties>>;
-
-    getClusterExpansionZoom(
-      feature: Feature<Geometry, Properties> | number,
-    ): Promise<number>;
-    /**
-     * Returns all the leaves of a cluster with pagination support.
-     * @param cluster feature cluster
-     * @param limit the number of leaves to return
-     * @param offset the amount of points to skip (for pagination)
-     */
-    getClusterLeaves: (
-      feature: Feature<Geometry, Properties> | number,
-      limit: number,
-      offset: number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-    /**
-     * Returns the children of a cluster (on the next zoom level).
-     * @param cluster feature cluster
-     */
-    getClusterChildren: (
-      feature: Feature<Geometry, Properties> | number,
-    ) => Promise<FeatureCollection<Geometry, Properties>>;
-  }
   class RasterSource extends Component<RasterSourceProps> {}
   class RasterDemSource extends Component<RasterSourceProps> {}
 
@@ -810,30 +788,6 @@ export interface VectorSourceProps extends TileSourceProps {
   };
 }
 
-export interface ShapeSourceProps extends ViewProps {
-  id: string;
-  url?: string;
-  shape?:
-    | GeoJSON.GeometryCollection
-    | GeoJSON.Feature
-    | GeoJSON.FeatureCollection
-    | GeoJSON.Geometry;
-  cluster?: boolean;
-  clusterRadius?: number;
-  clusterMaxZoomLevel?: number;
-  clusterProperties?: object;
-  maxZoomLevel?: number;
-  buffer?: number;
-  tolerance?: number;
-  lineMetrics?: boolean;
-  images?: { assets?: string[] } & { [key: string]: ImageSourcePropType };
-  onPress?: (event: OnPressEvent) => void;
-  hitbox?: {
-    width: number;
-    height: number;
-  };
-}
-
 export interface RasterSourceProps extends TileSourceProps {
   tileSize?: number;
 }
@@ -875,10 +829,6 @@ export interface RasterLayerProps extends LayerBaseProps {
   style?: StyleProp<RasterLayerStyle>;
 }
 
-export interface SymbolLayerProps extends LayerBaseProps {
-  style?: SymbolLayerStyleProps;
-}
-
 export interface HeatmapLayerProps extends LayerBaseProps {
   style?: StyleProp<HeatmapLayerStyle>;
 }

package/ios/RCTMGL-v10/RCTMGLCamera.swift

@@ -14,7 +14,7 @@ enum CameraMode: String, CaseIterable {
 }
 
 enum UserTrackingMode: String {
-  case none,compass, course, normal
+  case none, compass, course, normal
 }
 
 struct CameraUpdateItem {
@@ -188,7 +188,7 @@ class RCTMGLCamera : RCTMGLMapComponentBase, LocationConsumer {
 
   func _updateCameraFromTrackingMode() {
     withMapView { map in
-      let userTrackingMode = UserTrackingMode(rawValue: self.followUserMode ?? "none")
+      let userTrackingMode = UserTrackingMode(rawValue: self.followUserMode ?? UserTrackingMode.normal.rawValue)
       guard let userTrackingMode = userTrackingMode else {
         Logger.error("RCTMGLCamera: Unexpected followUserMode \(optional: self.followUserMode)")
         self._disableUsetTracking(map)

package/ios/install.md

@@ -56,10 +56,11 @@ Add the following to the beginning of your podfile
 $RNMapboxMapsImpl = 'mapbox'
 ```
 
-You can also specify the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
+You can also override the version to use. *Warning:* if you set a version, then later update, the `rnamapbox/maps` library it's possible that you'll end up using Mapbox older version than supported. Make sure you revise this value with `rnmapbox/maps` updates.
 
 ```ruby
-$RNMapboxMapsVersion = '~> 10.9.0'
+# Warning: only for advanced use cases, only do this if you know what you're doing.
+# $RNMapboxMapsVersion = '~> 10.9.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/AbstractLayer.tsx

@@ -42,11 +42,11 @@ class AbstractLayer<
     | (React.Component<NativePropsType> & Readonly<NativeMethods>)
     | undefined = undefined;
 
-  setNativeLayer(
+  setNativeLayer = (
     instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
-  ) {
+  ) => {
     this.nativeLayer = instance;
-  }
+  };
 
   getStyleTypeFormatter(styleType: string) {
     if (styleType === 'color') {

package/javascript/components/AbstractSource.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NativeMethods } from 'react-native';
+
+class AbstractSource<
+  PropsType,
+  NativePropsType extends object,
+> extends React.PureComponent<PropsType> {
+  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
+
+  setNativeProps(props: NativePropsType) {
+    if (this._nativeRef) {
+      this._nativeRef.setNativeProps(props);
+    }
+  }
+
+  setNativeRef: (
+    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
+  ) => void = (instance) => {
+    this._nativeRef = instance;
+  };
+}
+
+export default AbstractSource;

package/javascript/components/HeadingIndicator.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import headingIcon from '../../assets/heading.png';
 
-import SymbolLayer from './SymbolLayer';
+import { SymbolLayer } from './SymbolLayer';
 
 const style = {
   iconImage: headingIcon,

package/javascript/components/Images.js

@@ -4,7 +4,7 @@ import { requireNativeComponent, Image } from 'react-native';
 
 import { viewPropTypes } from '../utils';
 
-import ShapeSource from './ShapeSource';
+import { ShapeSource } from './ShapeSource';
 
 export const NATIVE_MODULE_NAME = 'RCTMGLImages';
 

package/javascript/components/MapView.js

@@ -42,7 +42,10 @@ const defaultStyleURL = MapboxGL.StyleURL.Street;
 /**
  * MapView backed by Mapbox Native GL
  */
-class MapView extends NativeBridgeComponent(React.Component) {
+class MapView extends NativeBridgeComponent(
+  React.Component,
+  NATIVE_MODULE_NAME,
+) {
   static propTypes = {
     ...viewPropTypes,
 
@@ -306,7 +309,7 @@ class MapView extends NativeBridgeComponent(React.Component) {
   };
 
   constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
+    super(props);
 
     this.logger = Logger.sharedInstance();
     this.logger.start();

package/javascript/components/MarkerView.tsx

@@ -97,6 +97,7 @@ class MarkerView extends React.PureComponent<{
             <RCTMGLMarkerViewWrapper
               style={{
                 alignSelf: 'flex-start',
+                position: 'absolute',
               }}
             >
               {child}