feat: remove Style component

BREAKING CHANGE: Remove `Style` component, use `styleJSON` of `MapView` instead

docs/docs.json

@@ -3355,23 +3355,6 @@
     "filePath": "src/components/ShapeSource.tsx",
     "name": "ShapeSource"
   },
-  "Style": {
-    "description": "Style is a component that automatically adds sources / layers to the map using MapLibre Style Spec.\nOnly [`sources`](https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/) & [`layers`](https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/) are supported.\nOther fields such as `sprites`, `glyphs` etc. will be ignored. Not all layer / source attributes from the style spec are supported, in general the supported attributes will be mentioned under https://github.com/maplibre/maplibre-react-native/tree/main/docs.\n\nTODO: Maintainer forking this project does not understand the above comment regarding what is supported.",
-    "displayName": "Style",
-    "methods": [],
-    "props": [
-      {
-        "name": "json",
-        "required": false,
-        "type": "MapLibreJSON \\| URL",
-        "default": "none",
-        "description": "A JSON object conforming to the schema described in the MapLibre Style Specification, or a URL to such JSON."
-      }
-    ],
-    "type": "component",
-    "filePath": "src/components/Style.tsx",
-    "name": "Style"
-  },
   "SymbolLayer": {
     "description": "SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.",
     "displayName": "SymbolLayer",

packages/examples/src/Examples.tsx

@@ -59,10 +59,7 @@ const Examples = new ExampleGroup(
     new ExampleItem("Bug Report", MapLibreExamples.BugReport),
     new ExampleGroup("Map", [
       new ExampleItem("Show Map", MapLibreExamples.ShowMap),
-      new ExampleItem(
-        "Show Map with Local Style.JSON",
-        MapLibreExamples.ShowMapLocalStyle,
-      ),
+      new ExampleItem("Local Style from JSON", MapLibreExamples.LocalStyleJSON),
       new ExampleItem("Show Click", MapLibreExamples.ShowClick),
       new ExampleItem(
         "Show Region did Change",
@@ -86,7 +83,6 @@ const Examples = new ExampleGroup(
         "Source Layer Visiblity",
         MapLibreExamples.SourceLayerVisibility,
       ),
-      new ExampleItem("Style JSON", MapLibreExamples.StyleJson),
       new ExampleItem("Set Tint Color", MapLibreExamples.SetTintColor),
     ]),
     new ExampleGroup("Camera", [

packages/examples/src/examples/Map/LocalStyleJSON.tsx

@@ -0,0 +1,33 @@
+import { MapView } from "@maplibre/maplibre-react-native";
+import { useState } from "react";
+import { Text } from "react-native";
+
+import MapLibreDemoTilesBlue from "../../assets/styles/maplibre-demo-tiles-blue.json";
+import MapLibreDemoTilesWhite from "../../assets/styles/maplibre-demo-tiles-white.json";
+import Bubble from "../../components/Bubble";
+import { sheet } from "../../styles/sheet";
+
+const STYLE_BLUE = JSON.stringify(MapLibreDemoTilesBlue);
+const STYLE_WHITE = JSON.stringify(MapLibreDemoTilesWhite);
+
+export default function LocalStyleJSON() {
+  const [color, setColor] = useState<"blue" | "white">("blue");
+
+  return (
+    <>
+      <MapView
+        style={sheet.matchParent}
+        styleJSON={{ blue: STYLE_BLUE, white: STYLE_WHITE }[color]}
+      />
+      <Bubble
+        onPress={() =>
+          setColor((prevState) => {
+            return ({ blue: "white", white: "blue" } as const)[prevState];
+          })
+        }
+      >
+        <Text>Switch Style JSON</Text>
+      </Bubble>
+    </>
+  );
+}