fix(ios, v11): update style import config on change (#3080)

README.md

@@ -175,6 +175,7 @@ const styles = StyleSheet.create({
 ### Components
 
 - [MapView](/docs/MapView.md)
+- [StyleImport](/docs/StyleImport.md)
 - [Light](/docs/Light.md)
 - [StyleSheet](/docs/StyleSheet.md)
 - [PointAnnotation](/docs/PointAnnotation.md)

docs/StyleImport.md

@@ -5,7 +5,9 @@ import { StyleImport } from '@rnmapbox/maps';
 
 StyleImport
 ```
+Use StyleImport to set configuration options on the new standard style. **V11 only.**
 
+See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
 
 ## props
 
@@ -16,7 +18,7 @@ StyleImport
 string
 ```
 _required_
-FIX ME NO DESCRIPTION
+id of the style import (eg. basemap)
 
 
 
@@ -26,15 +28,17 @@ FIX ME NO DESCRIPTION
 boolean
 ```
 _required_
-FIX ME NO DESCRIPTION
+existing is now always required as true
 
 
 
 ### config
 
 TODO
 _required_
-FIX ME NO DESCRIPTION
+config is a dictionary of configuration options for the style import.
+
+See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
 
 
 

docs/docs.json

@@ -4766,22 +4766,22 @@
     "name": "Style"
   },
   "StyleImport": {
-    "description": "",
+    "description": "Use StyleImport to set configuration options on the new standard style. **V11 only.**\n\nSee https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style",
     "methods": [],
     "props": [
       {
         "name": "id",
         "required": true,
         "type": "string",
         "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
+        "description": "id of the style import (eg. basemap)"
       },
       {
         "name": "existing",
         "required": true,
         "type": "boolean",
         "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
+        "description": "existing is now always required as true"
       },
       {
         "name": "config",
@@ -4801,7 +4801,7 @@
           ]
         },
         "default": "none",
-        "description": "FIX ME NO DESCRIPTION"
+        "description": "config is a dictionary of configuration options for the style import.\n\nSee https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style"
       }
     ],
     "fileNameWithExt": "StyleImport.tsx",

example/ios/Podfile

@@ -9,7 +9,7 @@ prepare_react_native_project!
 $RNMapboxMapsImpl = 'mapbox'
 if ENV['RNMBX11']
   $RNMapboxMapsUseV11 = true # use 11 version
-  $RNMapboxMapsVersion = '= 11.0.0-beta.3'
+  $RNMapboxMapsVersion = '= 11.0.0-beta.4'
 end
 
 

example/src/examples/V11/StyleImportConfig.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Button, SafeAreaView } from 'react-native';
+import { MapView, StyleImport, Camera } from '@rnmapbox/maps';
+
+const styles = {
+  mapView: { flex: 1 },
+};
+
+const StyleImportConfig = () => {
+  const [lightPreset, setLightPreset] = useState('night');
+  console.log('# lightPreset', lightPreset);
+  const nextLightPreset = lightPreset === 'night' ? 'day' : 'night';
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <Button
+        title={`Change to ${nextLightPreset}`}
+        onPress={() => {
+          setLightPreset(nextLightPreset);
+        }}
+      />
+      <MapView
+        style={styles.mapView}
+        styleURL={'mapbox://styles/mapbox/standard-beta'}
+      >
+        <Camera
+          centerCoordinate={[-74.00597, 40.71427]}
+          zoomLevel={18}
+          pitch={33}
+        />
+        <StyleImport
+          id="basemap"
+          existing
+          config={{
+            lightPreset: lightPreset,
+          }}
+        />
+      </MapView>
+    </SafeAreaView>
+  );
+};
+
+StyleImportConfig.title = 'Style Import Config';
+StyleImportConfig.tags = ['StyleImport', 'v11'];
+StyleImportConfig.docs = `
+# Style Import Config
+
+This example shows how to change style import configs - v11 only.
+`;
+
+export default StyleImportConfig;

example/src/scenes/GroupAndItem.tsx

@@ -88,6 +88,8 @@ import MapHandlers from '../examples/V10/MapHandlers';
 import Markers from '../examples/V10/Markers';
 import QueryTerrainElevation from '../examples/V10/QueryTerrainElevation';
 import TerrainSkyAtmosphere from '../examples/V10/TerrainSkyAtmosphere';
+// V11
+import StyleImportConfig from '../examples/V11/StyleImportConfig';
 
 const MostRecentExampleKey = '@recent_example';
 
@@ -274,6 +276,7 @@ const Examples = new ExampleGroup('React Native Mapbox', [
     new ExampleItem('Camera Animation', CameraAnimation),
     new ExampleItem('Map Handlers', MapHandlers),
   ]),
+  new ExampleGroup('V11', [example(StyleImportConfig)]),
   new ExampleGroup('Map', [
     new ExampleItem('Show Map', ShowMap),
     new ExampleItem('Show Map With Local Style.JSON', ShowMapLocalStyle),

ios/RNMBX/RNMBXMapView.swift

@@ -768,6 +768,16 @@ extension RNMBXMapView {
   }
 }
 
+extension MapboxMaps.PointAnnotationManager {
+  public func refresh() {
+    #if !RNMBX_11
+    syncSourceAndLayerIfNeeded()
+    #else
+    self.annotations = annotations
+    #endif
+  }
+}
+
 extension RNMBXMapView: GestureManagerDelegate {
   private func draggableSources() -> [RNMBXInteractiveElement] {
     return sources.filter { $0.isDraggable() }
@@ -1234,7 +1244,7 @@ class PointAnnotationManager : AnnotationInteractionDelegate {
 
   func add(_ annotation: PointAnnotation) {
     manager.annotations.append(annotation)
-    manager.syncSourceAndLayerIfNeeded()
+    manager.refresh()
   }
 
   func update(_ annotation: PointAnnotation) {
@@ -1246,6 +1256,7 @@ class PointAnnotationManager : AnnotationInteractionDelegate {
     }
 
     manager.annotations[index] = annotation
-    manager.syncSourceAndLayerIfNeeded()
+    manager.refresh()
   }
 }
+

ios/RNMBX/RNMBXStyleImport.swift

@@ -12,7 +12,13 @@ open class RNMBXStyleImport : UIView, RNMBXMapComponent {
   var existing: Bool = false;
 
   @objc
-  var config: [String: Any]?
+  var config: [String: Any]? {
+    didSet {
+      if let mapView = mapView {
+        apply(mapView: mapView)
+      }
+    }
+  }
 
   func waitForStyleLoad() -> Bool {
     true

src/components/StyleImport.tsx

@@ -3,15 +3,31 @@ import React, { memo } from 'react';
 import NativeStyleImport from '../specs/RNMBXStyleImportNativeComponent';
 
 type Props = {
+  /**
+   * id of the style import (eg. basemap)
+   */
   id: string;
 
+  /**
+   * existing is now always required as true
+   */
   existing: boolean;
 
+  /**
+   * config is a dictionary of configuration options for the style import.
+   *
+   * See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
+   */
   config: {
     [key: string]: string;
   };
 };
 
+/**
+ * Use StyleImport to set configuration options on the new standard style. **V11 only.**
+ *
+ * See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
+ */
 export default memo((props: Props) => {
   return <NativeStyleImport {...props} />;
 });