@rnmapbox/maps 10.0.0-beta.31 → 10.0.0-beta.32

package/javascript/web/MapContext.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Map } from 'mapbox-gl';
+
+const MapContext = React.createContext<{ map?: Map }>({});
+
+export default MapContext;

package/javascript/web/components/Camera.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import MapContext from '../MapContext';
+
+class Camera extends React.Component<{
+  centerCoordinate: [number, number] | null;
+}> {
+  context!: React.ContextType<typeof MapContext>;
+
+  static contextType = MapContext;
+  static UserTrackingModes = [];
+
+  componentDidMount() {
+    const { map } = this.context;
+    const { centerCoordinate } = this.props;
+    if (map && centerCoordinate) {
+      map.flyTo({ center: centerCoordinate });
+    }
+  }
+
+  fitBounds(
+    northEastCoordinates: [number, number],
+    southWestCoordinates: [number, number],
+    padding = 0,
+    animationDuration = 0.0,
+  ) {
+    const { map } = this.context;
+    if (map) {
+      map.fitBounds([northEastCoordinates, southWestCoordinates]);
+    }
+  }
+
+  render() {
+    return <></>;
+  }
+}
+
+export { Camera };
+export default Camera;

package/javascript/web/components/MapView.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import mapboxgl from 'mapbox-gl';
+
+import MapContext from '../MapContext';
+
+/**
+ * MapView backed by Mapbox GL KS
+ */
+class MapView extends React.Component<
+  { styleURL: string; children: JSX.Element },
+  { map?: object | null }
+> {
+  state = { map: null };
+  mapContainer: HTMLElement | null = null;
+  map: object | null = null;
+
+  componentDidMount() {
+    const { styleURL } = this.props;
+    if (!this.mapContainer) {
+      console.error('MapView - mapContainer should is null');
+      return;
+    }
+    const map = new mapboxgl.Map({
+      container: this.mapContainer,
+      style: styleURL || 'mapbox://styles/mapbox/streets-v11',
+    });
+    this.map = map;
+    this.setState({ map });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { map } = this.state;
+    return (
+      <div
+        style={{ width: '100%', height: '100%' }}
+        ref={(el) => (this.mapContainer = el)}
+      >
+        {map && (
+          <div style={{ position: 'absolute' }}>
+            <MapContext.Provider value={{ map }}>
+              {children}
+            </MapContext.Provider>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default MapView;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.31",
+  "version": "10.0.0-beta.32",
   "publishConfig": {
     "access": "public"
   },
@@ -65,6 +65,7 @@
     "@react-native-community/eslint-config": "^3.0.1",
     "@sinonjs/fake-timers": "^8.0.1",
     "@testing-library/react-native": "^8.0.0",
+    "@types/mapbox-gl": "^2.7.5",
     "@types/react-native": ">=0.59.9",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
@@ -89,7 +90,8 @@
     "react-docgen": "6.0.0-alpha.3",
     "react-native": "0.67.0",
     "react-test-renderer": "17.0.2",
-    "typescript": "^4.4.3"
+    "typescript": "^4.4.3",
+    "mapbox-gl": "^ 2.9.0"
   },
   "jest": {
     "preset": "react-native",

package/javascript/web/MapContext.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const MapContext = React.createContext({});
-
-export default MapContext;