@rnmapbox/maps 10.0.0-beta.30 → 10.0.0-beta.33

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,13 +1,14 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.30",
+  "version": "10.0.0-beta.33",
   "publishConfig": {
     "access": "public"
   },
   "author": "React Native Mapbox Team",
   "main": "./javascript/index.js",
   "browser": "./javascript/index.web.js",
+  "react-native": "./javascript/index.js",
   "keywords": [
     "gl",
     "ios",
@@ -28,10 +29,11 @@
     "unittest:single": "jest --testNamePattern",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "type:check": "yarn tsc --noEmit",
+    "type:check": "tsc --noEmit",
     "test:plugin": "expo-module test plugin",
     "build:plugin": "tsc --build plugin",
-    "lint:plugin": "eslint plugin/src/*"
+    "lint:plugin": "eslint plugin/src/*",
+    "prepare": "husky install"
   },
   "peerDependencies": {
     "prop-types": ">=15.5.8",
@@ -64,6 +66,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",
@@ -77,7 +80,7 @@
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-import": "2.25.3",
     "expo-module-scripts": "^2.0.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",
     "lint-staged": "^12.1.2",
@@ -88,7 +91,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",
@@ -105,11 +109,6 @@
       "fixtures"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged && npm run generate"
-    }
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --fix"
   }

package/scripts/autogenerate.js

@@ -464,8 +464,8 @@ async function generate() {
       only: 'v10',
     },
     {
-      input: path.join(TMPL_PATH, 'styleMap.js.ejs'),
-      output: path.join(JS_OUTPUT_PATH, 'styleMap.js'),
+      input: path.join(TMPL_PATH, 'styleMap.ts.ejs'),
+      output: path.join(JS_OUTPUT_PATH, 'styleMap.ts'),
     },
   ];
   const outputPaths = templateMappings.map((m) => m.output);

package/scripts/templates/{styleMap.js.ejs → styleMap.ts.ejs}

@@ -6,7 +6,7 @@
 // THIS FILE IS AUTOGENERATED
 
 import PropTypes from 'prop-types';
-import { IS_ANDROID } from './index';
+import { isAndroid } from './index';
 
 export const StyleTypes = {
   Constant: 'constant',
@@ -18,8 +18,8 @@ export const StyleTypes = {
   Enum: 'enum',
 };
 
-export function getStyleType(styleProp) {
-  if (!IS_ANDROID && styleExtras[styleProp]) {
+export function getStyleType(styleProp: keyof typeof styleExtras) {
+  if (!isAndroid() && styleExtras[styleProp]) {
     return styleExtras[styleProp].iosType;
   }
 
@@ -62,7 +62,7 @@ export const <%- pascelCase(layer.name) _%>LayerStyleProp = PropTypes.shape({
 const styleMap = {
   <%_ for (let layer of layers) { _%>
   <%_ for (let prop of layer.properties) { _%>
-  <%_ if (prop.name !== 'visibility') { _%>
+  <%_ if (!['color', 'colorTransition', 'visibility'].includes(prop.name)) { _%>
   <%= prop.name %>: <%- jsStyleType(prop) %>,
   <%_ if (prop.transition) { _%>
   <%= prop.name %>Transition: StyleTypes.Transition,
@@ -71,6 +71,9 @@ const styleMap = {
   <%_ } _%>
 
   <%_ } _%>
+
+  color: StyleTypes.Color,
+  colorTransition: StyleTypes.Transition,
   visibility: StyleTypes.Constant,
 };
 

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,75 +0,0 @@
----
-name: Bug
-about: This template should be used for reporting bugs and defects.
-title: ''
-labels: 'bug :beetle:'
-assignees: ''
-
----
-
-
-## Environment
-
-- Mapbox (GL) implementation: [e.g. v10, MapLibre, MapboxGL]
-- Mapbox (GL) version: [e.g. 6.3.0]
-- @rnmapbox/maps Version [e.g. #main]
-- Platform: [e.g. Android, iOS]
-- React Native Version [e.g. 0.59]
-- Platform OS: [e.g. Android 9, iOS 10]
-- Device: [e.g. iPhone6]
-- Emulator/ Simulator: [yes/ no]
-- Dev OS: [e.g. OSX 11.0.1, Win10]
-
-## Standalone component to reproduce
-
-<!--- Use [our BugReportTemplate](https://github.com/rnmapbox/maps/blob/main/example/src/examples/BugReportExample.js) screens as a starting point. --->
-<!--- Component should be self contained - no extra libraries, external data, no parameters --->
-<!--- Do not include setAccessToken or access token istelf. ---->
-
-
-```js
-import React from 'react';
-import {
-  MapView,
-  ShapeSource,
-  LineLayer,
-  Camera,
-} from '@rnmapbox/maps';
-
-const aLine = {
-  type: 'LineString',
-  coordinates: [
-    [-74.00597, 40.71427],
-    [-74.00697, 40.71527],
-  ],
-};
-
-class BugReportExample extends React.Component {
-  render() {
-    return (
-      <MapView style={{flex: 1}}>
-        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
-        <ShapeSource id="idStreetLayer" shape={aLine}>
-          <LineLayer id="idStreetLayer" />
-        </ShapeSource>
-      </MapView>
-    );
-  }
-}
-```
-
-## Observed behavior and steps to reproduce
-
-<!--- Please include as much evidence as possible (traces, videos, screenshots etc.) --->
-
-## Expected behavior
-
-<!--- Please include the expected behavior and any resources supporting this expected behavior. --->
-
-## Notes / preliminary analysis
-
-<!--- include your initial analysis, if available --->
-
-## Additional links and references
-
-<!--- Links to traces, videos et --->

package/javascript/utils/resolveAssetSource.d.ts

@@ -1,5 +0,0 @@
-declare module 'react-native/Libraries/Image/resolveAssetSource' {
-  export default function resolveAssetSource(x: number): {
-    [key: string]: string;
-  };
-}

package/javascript/web/MapContext.js

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