From b56b15489526e0f8088cdff9638996b4e6b4b508 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 5 May 2020 21:15:11 +0200 Subject: [PATCH 1/3] Web support --- __tests__/__mocks__/react-native.mock.js | 13 ++++++ example/app.json | 9 +++- example/index.js | 7 ++- example/ios/Podfile.lock | 8 ++-- example/metro.config.js | 5 ++- example/package.json | 3 +- javascript/components/BackgroundLayer.web.js | 3 ++ javascript/components/Callout.web.js | 3 ++ javascript/components/Camera.web.js | 3 ++ javascript/components/CircleLayer.web.js | 3 ++ .../components/FillExtrusionLayer.web.js | 3 ++ javascript/components/FillLayer.web.js | 3 ++ javascript/components/HeatmapLayer.web.js | 3 ++ javascript/components/ImageSource.web.js | 3 ++ javascript/components/Images.js | 5 +-- javascript/components/Images.web.js | 3 ++ javascript/components/Light.web.js | 3 ++ javascript/components/LineLayer.web.js | 3 ++ javascript/components/MapView.web.js | 3 ++ .../components/NativeUserLocation.web.js | 3 ++ javascript/components/PointAnnotation.web.js | 3 ++ javascript/components/RasterLayer.web.js | 3 ++ javascript/components/RasterSource.web.js | 3 ++ javascript/components/ShapeSource.web.js | 3 ++ javascript/components/SymbolLayer.web.js | 3 ++ javascript/components/VectorSource.web.js | 3 ++ javascript/index.js | 9 +++- javascript/utils/MGLModuleForWeb.js | 3 ++ javascript/utils/MGLModuleForWeb.web.js | 3 ++ javascript/utils/index.js | 11 +++-- javascript/web/Camera.js | 31 +++++++++++++ javascript/web/MGLModule.js | 16 +++++++ javascript/web/MapContext.js | 5 +++ javascript/web/MapView.js | 45 +++++++++++++++++++ javascript/web/UnimplementedComponent.js | 10 +++++ scripts/autogenHelpers/DocJSONBuilder.js | 9 ++-- 36 files changed, 230 insertions(+), 19 deletions(-) create mode 100644 javascript/components/BackgroundLayer.web.js create mode 100644 javascript/components/Callout.web.js create mode 100644 javascript/components/Camera.web.js create mode 100644 javascript/components/CircleLayer.web.js create mode 100644 javascript/components/FillExtrusionLayer.web.js create mode 100644 javascript/components/FillLayer.web.js create mode 100644 javascript/components/HeatmapLayer.web.js create mode 100644 javascript/components/ImageSource.web.js create mode 100644 javascript/components/Images.web.js create mode 100644 javascript/components/Light.web.js create mode 100644 javascript/components/LineLayer.web.js create mode 100644 javascript/components/MapView.web.js create mode 100644 javascript/components/NativeUserLocation.web.js create mode 100644 javascript/components/PointAnnotation.web.js create mode 100644 javascript/components/RasterLayer.web.js create mode 100644 javascript/components/RasterSource.web.js create mode 100644 javascript/components/ShapeSource.web.js create mode 100644 javascript/components/SymbolLayer.web.js create mode 100644 javascript/components/VectorSource.web.js create mode 100644 javascript/utils/MGLModuleForWeb.js create mode 100644 javascript/utils/MGLModuleForWeb.web.js create mode 100644 javascript/web/Camera.js create mode 100644 javascript/web/MGLModule.js create mode 100644 javascript/web/MapContext.js create mode 100644 javascript/web/MapView.js create mode 100644 javascript/web/UnimplementedComponent.js diff --git a/__tests__/__mocks__/react-native.mock.js b/__tests__/__mocks__/react-native.mock.js index 7dc05bc3e..30f073484 100644 --- a/__tests__/__mocks__/react-native.mock.js +++ b/__tests__/__mocks__/react-native.mock.js @@ -12,3 +12,16 @@ jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => { default: MockEventEmitter, }; }); + +jest.mock('react-native/Libraries/Utilities/Platform', () => ({ + OS: 'ios', // or 'android' + select: (x) => { + if (x.android) { + return x.android; + } else if (x.native) { + return x.native; + } else if (x.default) { + return x.default; + } + }, +})); diff --git a/example/app.json b/example/app.json index 3b3a55891..e9091ad2f 100644 --- a/example/app.json +++ b/example/app.json @@ -1,4 +1,11 @@ { "name": "RNMapboxGLExample", - "displayName": "RNMapboxGLExample" + "displayName": "RNMapboxExample", + "expo": { + "name": "RNMapboxGLExample", + "privacy": "unlisted", + "sdkVersion": "46.0.0", + "version": "1.0.0", + "platforms": ["ios", "android", "web"] + } } \ No newline at end of file diff --git a/example/index.js b/example/index.js index e1dd8be53..6ae9614f6 100644 --- a/example/index.js +++ b/example/index.js @@ -2,9 +2,14 @@ * @format */ -import { AppRegistry } from 'react-native'; +import { AppRegistry, Platform } from 'react-native'; import App from './src/App'; import { name as appName } from './app.json'; AppRegistry.registerComponent(appName, () => App); + +if (Platform.OS === 'web') { + const rootTag = document.getElementById('root'); + AppRegistry.runApplication(appName, { rootTag }); +} diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index eae2e724d..9e37fd212 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -367,13 +367,13 @@ PODS: - React-perflogger (= 0.69.4) - RNGestureHandler (2.5.0): - React-Core - - rnmapbox-maps (10.0.0-beta.25): + - rnmapbox-maps (10.0.0-beta.28): - MapboxMaps (~> 10.7.0) - React - React-Core - - rnmapbox-maps/DynamicLibrary (= 10.0.0-beta.25) + - rnmapbox-maps/DynamicLibrary (= 10.0.0-beta.28) - Turf - - rnmapbox-maps/DynamicLibrary (10.0.0-beta.25): + - rnmapbox-maps/DynamicLibrary (10.0.0-beta.28): - MapboxMaps (~> 10.7.0) - React - React-Core @@ -607,7 +607,7 @@ SPEC CHECKSUMS: React-runtimeexecutor: 61ee22a8cdf8b6bb2a7fb7b4ba2cc763e5285196 ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83 RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50 - rnmapbox-maps: 1a68a37f3d28e084423495d23b2a4e4aab6c36e1 + rnmapbox-maps: ac661ea2e71df538a581365ae65a142178e28d77 RNScreens: ee31ecdf23fe81e93c74feaa086cf173d758ab58 RNSVG: ce9d996113475209013317e48b05c21ee988d42e RNVectorIcons: 4143ba35feebab8fdbe6bc43d1e776b393d47ac8 diff --git a/example/metro.config.js b/example/metro.config.js index d19d8b044..c24566c8d 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -44,7 +44,10 @@ function getBlacklist() { )}/node_modules/react-native/node_modules/@babel/*`, ), ]; - return blacklist(nodeModuleDirs); + const webSupportSources = [ + glob(`${path.resolve(__dirname, '..')}/javascript/web/*`), + ]; + return blacklist([...nodeModuleDirs, ...webSupportSources]); } module.exports = { diff --git a/example/package.json b/example/package.json index f5807a2b9..0de6d163f 100644 --- a/example/package.json +++ b/example/package.json @@ -42,7 +42,8 @@ "react-native-safe-area-context": "^4.3.3", "react-native-screens": "^3.0.0", "react-native-svg": "^12.1.0", - "react-native-vector-icons": "9.0.0" + "react-native-vector-icons": "9.0.0", + "react-native-web": "0.18.7" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/javascript/components/BackgroundLayer.web.js b/javascript/components/BackgroundLayer.web.js new file mode 100644 index 000000000..f4c336931 --- /dev/null +++ b/javascript/components/BackgroundLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('BackgroundLayer'); diff --git a/javascript/components/Callout.web.js b/javascript/components/Callout.web.js new file mode 100644 index 000000000..ef9ee6685 --- /dev/null +++ b/javascript/components/Callout.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('Callout'); diff --git a/javascript/components/Camera.web.js b/javascript/components/Camera.web.js new file mode 100644 index 000000000..3b23b4c06 --- /dev/null +++ b/javascript/components/Camera.web.js @@ -0,0 +1,3 @@ +import Camera from '../web/Camera'; + +export default Camera; diff --git a/javascript/components/CircleLayer.web.js b/javascript/components/CircleLayer.web.js new file mode 100644 index 000000000..aea96a41a --- /dev/null +++ b/javascript/components/CircleLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('CircleLayer'); diff --git a/javascript/components/FillExtrusionLayer.web.js b/javascript/components/FillExtrusionLayer.web.js new file mode 100644 index 000000000..119693ddd --- /dev/null +++ b/javascript/components/FillExtrusionLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('FillExtrusionLayer'); diff --git a/javascript/components/FillLayer.web.js b/javascript/components/FillLayer.web.js new file mode 100644 index 000000000..eca3e61f5 --- /dev/null +++ b/javascript/components/FillLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('FillLayer'); diff --git a/javascript/components/HeatmapLayer.web.js b/javascript/components/HeatmapLayer.web.js new file mode 100644 index 000000000..3a76f3859 --- /dev/null +++ b/javascript/components/HeatmapLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('HeatmapLayer'); diff --git a/javascript/components/ImageSource.web.js b/javascript/components/ImageSource.web.js new file mode 100644 index 000000000..ca370ef1b --- /dev/null +++ b/javascript/components/ImageSource.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('ImageSource'); diff --git a/javascript/components/Images.js b/javascript/components/Images.js index b6efbe67f..0887cc808 100644 --- a/javascript/components/Images.js +++ b/javascript/components/Images.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { requireNativeComponent } from 'react-native'; -import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; +import { requireNativeComponent, Image } from 'react-native'; import { viewPropTypes } from '../utils'; @@ -73,7 +72,7 @@ class Images extends React.Component { } else if (_isUrlOrPath(value)) { images[imageName] = value; } else { - const res = resolveAssetSource(value); + const res = Image.resolveAssetSource(value); if (res && res.uri) { images[imageName] = res; } diff --git a/javascript/components/Images.web.js b/javascript/components/Images.web.js new file mode 100644 index 000000000..4fb731da4 --- /dev/null +++ b/javascript/components/Images.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('Images'); diff --git a/javascript/components/Light.web.js b/javascript/components/Light.web.js new file mode 100644 index 000000000..e6a96499f --- /dev/null +++ b/javascript/components/Light.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('Light'); diff --git a/javascript/components/LineLayer.web.js b/javascript/components/LineLayer.web.js new file mode 100644 index 000000000..f06422a6d --- /dev/null +++ b/javascript/components/LineLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('LineLayer'); diff --git a/javascript/components/MapView.web.js b/javascript/components/MapView.web.js new file mode 100644 index 000000000..2f1ed75f4 --- /dev/null +++ b/javascript/components/MapView.web.js @@ -0,0 +1,3 @@ +import MapView from '../web/MapView'; + +export default MapView; diff --git a/javascript/components/NativeUserLocation.web.js b/javascript/components/NativeUserLocation.web.js new file mode 100644 index 000000000..e327ea65e --- /dev/null +++ b/javascript/components/NativeUserLocation.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('NativeUserLocation'); diff --git a/javascript/components/PointAnnotation.web.js b/javascript/components/PointAnnotation.web.js new file mode 100644 index 000000000..5264b3ad7 --- /dev/null +++ b/javascript/components/PointAnnotation.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('PointAnnotaiton'); diff --git a/javascript/components/RasterLayer.web.js b/javascript/components/RasterLayer.web.js new file mode 100644 index 000000000..5c60c302f --- /dev/null +++ b/javascript/components/RasterLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('RasterLayer'); diff --git a/javascript/components/RasterSource.web.js b/javascript/components/RasterSource.web.js new file mode 100644 index 000000000..570e3b437 --- /dev/null +++ b/javascript/components/RasterSource.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('RasterSource'); diff --git a/javascript/components/ShapeSource.web.js b/javascript/components/ShapeSource.web.js new file mode 100644 index 000000000..34b57fc99 --- /dev/null +++ b/javascript/components/ShapeSource.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('ShapeSource'); diff --git a/javascript/components/SymbolLayer.web.js b/javascript/components/SymbolLayer.web.js new file mode 100644 index 000000000..97fbf59ea --- /dev/null +++ b/javascript/components/SymbolLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('SymbolLayer'); diff --git a/javascript/components/VectorSource.web.js b/javascript/components/VectorSource.web.js new file mode 100644 index 000000000..82746aa3e --- /dev/null +++ b/javascript/components/VectorSource.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('VectorSource'); diff --git a/javascript/index.js b/javascript/index.js index 00406a90e..06f226951 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,4 +1,4 @@ -import { NativeModules } from 'react-native'; +import { NativeModules, Platform } from 'react-native'; import { Camera } from './components/Camera'; import { Atmosphere } from './components/Atmosphere'; @@ -38,7 +38,12 @@ import Style from './components/Style'; import Logger from './utils/Logger'; import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions'; -const MapboxGL = { ...NativeModules.MGLModule }; +const MapboxGL = Platform.select({ + native: () => ({ ...NativeModules.MGLModule }), + web: () => { + return require('./utils/MGLModuleForWeb').default; + }, +})(); // static methods MapboxGL.requestAndroidLocationPermissions = requestAndroidLocationPermissions; diff --git a/javascript/utils/MGLModuleForWeb.js b/javascript/utils/MGLModuleForWeb.js new file mode 100644 index 000000000..4d4ee549d --- /dev/null +++ b/javascript/utils/MGLModuleForWeb.js @@ -0,0 +1,3 @@ +/** + * Empty - only exits as metro bundler has issue with Platform select in index.js + */ diff --git a/javascript/utils/MGLModuleForWeb.web.js b/javascript/utils/MGLModuleForWeb.web.js new file mode 100644 index 000000000..fafa83aa0 --- /dev/null +++ b/javascript/utils/MGLModuleForWeb.web.js @@ -0,0 +1,3 @@ +import MGLModule from '../web/MGLModule'; + +export default MGLModule; diff --git a/javascript/utils/index.js b/javascript/utils/index.js index 24a02a24e..195678aa0 100644 --- a/javascript/utils/index.js +++ b/javascript/utils/index.js @@ -1,7 +1,12 @@ import React from 'react'; -import { View, NativeModules, findNodeHandle, Platform } from 'react-native'; +import { + View, + NativeModules, + findNodeHandle, + Platform, + Image, +} from 'react-native'; import { ViewPropTypes } from 'deprecated-react-native-prop-types'; -import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; import PropTypes from 'prop-types'; function getAndroidManagerInstance(module) { @@ -108,7 +113,7 @@ export function cloneReactChildrenWithProps(children, propsToAdd = {}) { } export function resolveImagePath(imageRef) { - const res = resolveAssetSource(imageRef); + const res = Image.resolveAssetSource(imageRef); return res.uri; } diff --git a/javascript/web/Camera.js b/javascript/web/Camera.js new file mode 100644 index 000000000..ffd9eb8c6 --- /dev/null +++ b/javascript/web/Camera.js @@ -0,0 +1,31 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; + +import MapContext from './MapContext'; + +class Camera extends React.Component { + componentDidMount() { + let { map } = this.context; + let { centerCoordinate } = this.props; + if (centerCoordinate) { + map.flyTo({ center: centerCoordinate }); + } + } + + fitBounds( + northEastCoordinates, + southWestCoordinates, + padding = 0, + animationDuration = 0.0, + ) { + let { map } = this.context; + map.fitBounds([northEastCoordinates, southWestCoordinates]); + } + + render() { + return <>; + } +} +Camera.contextType = MapContext; + +export default Camera; diff --git a/javascript/web/MGLModule.js b/javascript/web/MGLModule.js new file mode 100644 index 000000000..0e3958ebe --- /dev/null +++ b/javascript/web/MGLModule.js @@ -0,0 +1,16 @@ +import mapboxgl from 'mapbox-gl'; + +const MGLModule = { + LineJoin: {}, + + StyleURL: { + Street: 'mapbox://styles/mapbox/streets-v11', + Satellite: 'mapbox://styles/mapbox/satellite-v9', + }, + + setAccessToken: (token) => { + mapboxgl.accessToken = token; + }, +}; + +export default MGLModule; diff --git a/javascript/web/MapContext.js b/javascript/web/MapContext.js new file mode 100644 index 000000000..e23efad1e --- /dev/null +++ b/javascript/web/MapContext.js @@ -0,0 +1,5 @@ +import React from 'react'; + +const MapContext = React.createContext({}); + +export default MapContext; diff --git a/javascript/web/MapView.js b/javascript/web/MapView.js new file mode 100644 index 000000000..62af29f00 --- /dev/null +++ b/javascript/web/MapView.js @@ -0,0 +1,45 @@ +/* eslint-disable react/no-did-mount-set-state */ +/* eslint-disable react/prop-types */ +/* eslint-disable react-native/no-inline-styles */ +import React from 'react'; +import mapboxgl from 'mapbox-gl'; + +import MapContext from './MapContext'; + +/** + * MapView backed by Mapbox GL KS + */ +class MapView extends React.Component { + state = {}; + + componentDidMount() { + let { styleURL } = this.props; + 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 ( +
(this.mapContainer = el)} + > + {map && ( +
+ + {children} + +
+ )} +
+ ); + } +} + +export default MapView; diff --git a/javascript/web/UnimplementedComponent.js b/javascript/web/UnimplementedComponent.js new file mode 100644 index 000000000..f63e9c119 --- /dev/null +++ b/javascript/web/UnimplementedComponent.js @@ -0,0 +1,10 @@ +import React from 'react'; + +const UnimplementedComponent = (name) => + class SymbolLater extends React.Component { + render() { + return
TODO implement {name}
; + } + }; + +export default UnimplementedComponent; diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js index 6b497d8fb..165c1309f 100644 --- a/scripts/autogenHelpers/DocJSONBuilder.js +++ b/scripts/autogenHelpers/DocJSONBuilder.js @@ -23,6 +23,7 @@ const IGNORE_FILES = [ 'AbstractSource', 'NativeBridgeComponent', ]; +const IGNORE_PATTERN = /\.web$/; const IGNORE_METHODS = ['setNativeProps']; @@ -267,8 +268,10 @@ class DocJSONBuilder { } let fileName = fileNameWithExt.replace(/.(js)/, ''); - - if (IGNORE_FILES.includes(fileName)) { + if ( + IGNORE_FILES.includes(fileName) || + fileName.match(IGNORE_PATTERN) + ) { next(); return; } @@ -282,7 +285,7 @@ class DocJSONBuilder { this.postprocess(results[fileName], fileName); - next(); + return next(); }, () => resolve(), ); From f46194a64b5f400a544c50775eeec0535186905d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= Date: Sun, 21 Aug 2022 16:44:39 +0200 Subject: [PATCH 2/3] chore(web): Web support --- .eslintrc.js | 1 + example/babel.config.js | 2 +- example/package.json | 13 ++- .../src/examples/Animations/DriveTheLine.js | 2 +- example/src/examples/Camera/Fit.js | 5 +- .../FillRasterLayer/IndoorBuilding.js | 2 +- .../FillRasterLayer/WatercolorRasterTiles.js | 2 +- .../examples/SymbolCircleLayer/EarthQuakes.js | 2 +- .../UserLocation/SetUserLocationRenderMode.js | 2 +- example/src/examples/V10/CameraAnimation.tsx | 2 +- example/src/examples/V10/MapHandlers.js | 2 +- example/src/examples/common/MapHeader.js | 2 +- example/src/examples/common/TabBarPage.js | 2 +- example/src/scenes/GroupAndItem.tsx | 2 +- example/webpack.config.js | 17 +++ javascript/components/AbstractLayer.js | 3 - javascript/components/Atmosphere.web.tsx | 3 + javascript/components/Camera.web.js | 1 + javascript/components/MarkerView.web.js | 3 + javascript/components/RasterDemSource.web.js | 3 + javascript/components/SkyLayer.web.js | 3 + javascript/components/Terrain.web.js | 3 + javascript/index.js | 10 +- javascript/utils/Logger.web.tsx | 107 ++++++++++++++++++ javascript/utils/MGLModule.js | 8 ++ javascript/utils/StyleValue.ts | 5 +- javascript/web/Camera.js | 2 + 27 files changed, 177 insertions(+), 32 deletions(-) create mode 100644 example/webpack.config.js create mode 100644 javascript/components/Atmosphere.web.tsx create mode 100644 javascript/components/MarkerView.web.js create mode 100644 javascript/components/RasterDemSource.web.js create mode 100644 javascript/components/SkyLayer.web.js create mode 100644 javascript/components/Terrain.web.js create mode 100644 javascript/utils/Logger.web.tsx create mode 100644 javascript/utils/MGLModule.js diff --git a/.eslintrc.js b/.eslintrc.js index d12f5ee5f..a3d4b6a2e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -79,6 +79,7 @@ module.exports = { 'fp/no-mutating-methods': 'warn', 'react-native/no-inline-styles': 0, }, + ignorePatterns: ['**/rnmapbox.symlink'], overrides: [ { // Match TypeScript Files diff --git a/example/babel.config.js b/example/babel.config.js index 20ccdf08b..568169739 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -14,7 +14,7 @@ module.exports = (api) => { 'module-resolver', { alias: { - '@rnmapbox/maps': './maps/', + '@rnmapbox/maps': './rnmapbox.symlink', }, }, ] diff --git a/example/package.json b/example/package.json index 0de6d163f..dfdadb231 100644 --- a/example/package.json +++ b/example/package.json @@ -37,13 +37,18 @@ "prop-types": "^15.7.2", "react": "18.0.0", "react-native": "0.69.4", - "react-native-elements": "^4.0.0-rc.2", - "react-native-gesture-handler": "^2.5.0", + "@rneui/base": "^4.0.0-rc.6", "react-native-safe-area-context": "^4.3.3", "react-native-screens": "^3.0.0", "react-native-svg": "^12.1.0", - "react-native-vector-icons": "9.0.0", - "react-native-web": "0.18.7" + "react-native-vector-icons": "9.0.0" + }, + "optionalDependencies": { + "expo": "46.0.0", + "mapbox-gl": "^2.9.2", + "react-dom": "^18.2.0", + "react-native-web": "0.18.7", + "@expo/webpack-config": "^0.17.2" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/example/src/examples/Animations/DriveTheLine.js b/example/src/examples/Animations/DriveTheLine.js index b32e67f38..8b369b5fe 100755 --- a/example/src/examples/Animations/DriveTheLine.js +++ b/example/src/examples/Animations/DriveTheLine.js @@ -1,7 +1,7 @@ import React from 'react'; import MapboxGL from '@rnmapbox/maps'; import { View, StyleSheet } from 'react-native'; -import { Button } from 'react-native-elements'; +import { Button } from '@rneui/base'; import { lineString as makeLineString } from '@turf/helpers'; import { point } from '@turf/helpers'; diff --git a/example/src/examples/Camera/Fit.js b/example/src/examples/Camera/Fit.js index d46e630a7..b4939f1a8 100755 --- a/example/src/examples/Camera/Fit.js +++ b/example/src/examples/Camera/Fit.js @@ -1,7 +1,6 @@ import React from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, ScrollView, TouchableOpacity } from 'react-native'; import { isEqual } from 'lodash'; -import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'; import MapboxGL from '@rnmapbox/maps'; import sheet from '../../styles/sheet'; @@ -118,7 +117,7 @@ class Fit extends React.Component { backgroundColor: button.selected ? 'coral' : '#d8d8d8', borderRadius: 5, }} - onPress={button.onPress} + onPress={button.onPress} > {button.title} diff --git a/example/src/examples/FillRasterLayer/IndoorBuilding.js b/example/src/examples/FillRasterLayer/IndoorBuilding.js index 8005daaf3..41097379c 100755 --- a/example/src/examples/FillRasterLayer/IndoorBuilding.js +++ b/example/src/examples/FillRasterLayer/IndoorBuilding.js @@ -1,7 +1,7 @@ import React from 'react'; import { View, StyleSheet } from 'react-native'; import MapboxGL from '@rnmapbox/maps'; -import { Slider } from 'react-native-elements'; +import { Slider } from '@rneui/base'; import sheet from '../../styles/sheet'; import colors from '../../styles/colors'; diff --git a/example/src/examples/FillRasterLayer/WatercolorRasterTiles.js b/example/src/examples/FillRasterLayer/WatercolorRasterTiles.js index 5f67c81a2..926ba70d7 100755 --- a/example/src/examples/FillRasterLayer/WatercolorRasterTiles.js +++ b/example/src/examples/FillRasterLayer/WatercolorRasterTiles.js @@ -1,7 +1,7 @@ import React from 'react'; import { View, StyleSheet } from 'react-native'; import MapboxGL from '@rnmapbox/maps'; -import { Slider } from 'react-native-elements'; +import { Slider } from '@rneui/base'; import sheet from '../../styles/sheet'; import colors from '../../styles/colors'; diff --git a/example/src/examples/SymbolCircleLayer/EarthQuakes.js b/example/src/examples/SymbolCircleLayer/EarthQuakes.js index 9f81e60f9..45ecd9cb8 100755 --- a/example/src/examples/SymbolCircleLayer/EarthQuakes.js +++ b/example/src/examples/SymbolCircleLayer/EarthQuakes.js @@ -1,6 +1,6 @@ import React from 'react'; import { FlatList } from 'react-native'; -import { Overlay, ListItem, FAB, Icon } from 'react-native-elements'; +import { Overlay, ListItem, FAB, Icon } from '@rneui/base'; import MapboxGL from '@rnmapbox/maps'; import moment from 'moment'; diff --git a/example/src/examples/UserLocation/SetUserLocationRenderMode.js b/example/src/examples/UserLocation/SetUserLocationRenderMode.js index 6c2f62bee..726b16e60 100755 --- a/example/src/examples/UserLocation/SetUserLocationRenderMode.js +++ b/example/src/examples/UserLocation/SetUserLocationRenderMode.js @@ -1,7 +1,7 @@ import React from 'react'; import MapboxGL from '@rnmapbox/maps'; import { Button, View } from 'react-native'; -import { ButtonGroup } from 'react-native-elements'; +import { ButtonGroup } from '@rneui/base'; import PropTypes from 'prop-types'; import sheet from '../../styles/sheet'; diff --git a/example/src/examples/V10/CameraAnimation.tsx b/example/src/examples/V10/CameraAnimation.tsx index 560b353c0..0a338feec 100644 --- a/example/src/examples/V10/CameraAnimation.tsx +++ b/example/src/examples/V10/CameraAnimation.tsx @@ -11,7 +11,7 @@ import { CameraBounds, } from '@rnmapbox/maps'; import bbox from '@turf/bbox'; -import { Text, Divider } from 'react-native-elements'; +import { Text, Divider } from '@rneui/base'; import { Feature, Point, Position } from 'geojson'; import Page from '../common/Page'; diff --git a/example/src/examples/V10/MapHandlers.js b/example/src/examples/V10/MapHandlers.js index 5054f4126..e5aed034b 100644 --- a/example/src/examples/V10/MapHandlers.js +++ b/example/src/examples/V10/MapHandlers.js @@ -7,7 +7,7 @@ import { ShapeSource, Logger, } from '@rnmapbox/maps'; -import { Text, Divider } from 'react-native-elements'; +import { Text, Divider } from '@rneui/base'; import Page from '../common/Page'; import colors from '../../styles/colors'; diff --git a/example/src/examples/common/MapHeader.js b/example/src/examples/common/MapHeader.js index 8ed951b7b..197376e24 100644 --- a/example/src/examples/common/MapHeader.js +++ b/example/src/examples/common/MapHeader.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { StyleSheet } from 'react-native'; -import { Header } from 'react-native-elements'; +import { Header } from '@rneui/base'; import colors from '../../styles/colors'; diff --git a/example/src/examples/common/TabBarPage.js b/example/src/examples/common/TabBarPage.js index cec90d2cd..47139aaea 100755 --- a/example/src/examples/common/TabBarPage.js +++ b/example/src/examples/common/TabBarPage.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { StyleSheet, ScrollView } from 'react-native'; -import { ButtonGroup } from 'react-native-elements'; +import { ButtonGroup } from '@rneui/base'; import colors from '../../styles/colors'; diff --git a/example/src/scenes/GroupAndItem.tsx b/example/src/scenes/GroupAndItem.tsx index 094fa5b14..e067c3e33 100644 --- a/example/src/scenes/GroupAndItem.tsx +++ b/example/src/scenes/GroupAndItem.tsx @@ -6,7 +6,7 @@ import { StyleSheet, TouchableOpacity, } from 'react-native'; -import { Icon } from 'react-native-elements'; +import { Icon } from '@rneui/base'; import type { NativeStackScreenProps } from '@react-navigation/native-stack'; import Page from '../examples/common/Page'; diff --git a/example/webpack.config.js b/example/webpack.config.js new file mode 100644 index 000000000..09299a9a6 --- /dev/null +++ b/example/webpack.config.js @@ -0,0 +1,17 @@ +const path = require('path'); + +const createExpoWebpackConfigAsync = require('@expo/webpack-config'); + +module.exports = async function (env, argv) { + const config = await createExpoWebpackConfigAsync( + { + ...env, + babel: { + dangerouslyAddModulePathsToTranspile: ['@rneui/base'], + }, + }, + argv, + ); + + return config; +}; diff --git a/javascript/components/AbstractLayer.js b/javascript/components/AbstractLayer.js index e80639d69..fe5db5e74 100644 --- a/javascript/components/AbstractLayer.js +++ b/javascript/components/AbstractLayer.js @@ -1,11 +1,8 @@ /* eslint react/prop-types:0 */ import React from 'react'; import { processColor } from 'react-native'; -import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; import { getFilter } from '../utils/filterUtils'; -import { getStyleType } from '../utils/styleMap'; -import BridgeValue from '../utils/BridgeValue'; import { transformStyle } from '../utils/StyleValue'; class AbstractLayer extends React.PureComponent { diff --git a/javascript/components/Atmosphere.web.tsx b/javascript/components/Atmosphere.web.tsx new file mode 100644 index 000000000..570257ac5 --- /dev/null +++ b/javascript/components/Atmosphere.web.tsx @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('Atmosphere'); diff --git a/javascript/components/Camera.web.js b/javascript/components/Camera.web.js index 3b23b4c06..135669399 100644 --- a/javascript/components/Camera.web.js +++ b/javascript/components/Camera.web.js @@ -1,3 +1,4 @@ import Camera from '../web/Camera'; +export { Camera }; export default Camera; diff --git a/javascript/components/MarkerView.web.js b/javascript/components/MarkerView.web.js new file mode 100644 index 000000000..e03444a77 --- /dev/null +++ b/javascript/components/MarkerView.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('MarkerView'); diff --git a/javascript/components/RasterDemSource.web.js b/javascript/components/RasterDemSource.web.js new file mode 100644 index 000000000..9406ca048 --- /dev/null +++ b/javascript/components/RasterDemSource.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('RasterDemSource'); diff --git a/javascript/components/SkyLayer.web.js b/javascript/components/SkyLayer.web.js new file mode 100644 index 000000000..a684482b5 --- /dev/null +++ b/javascript/components/SkyLayer.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('SkyLayer'); diff --git a/javascript/components/Terrain.web.js b/javascript/components/Terrain.web.js new file mode 100644 index 000000000..f266acf2f --- /dev/null +++ b/javascript/components/Terrain.web.js @@ -0,0 +1,3 @@ +import UnimplementedComponent from '../web/UnimplementedComponent'; + +export default UnimplementedComponent('Terrain'); diff --git a/javascript/index.js b/javascript/index.js index 06f226951..97892b859 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,5 +1,3 @@ -import { NativeModules, Platform } from 'react-native'; - import { Camera } from './components/Camera'; import { Atmosphere } from './components/Atmosphere'; import MapView from './components/MapView'; @@ -36,14 +34,10 @@ import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtract import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray'; import Style from './components/Style'; import Logger from './utils/Logger'; +import MGLModule from './utils/MGLModule'; import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions'; -const MapboxGL = Platform.select({ - native: () => ({ ...NativeModules.MGLModule }), - web: () => { - return require('./utils/MGLModuleForWeb').default; - }, -})(); +const MapboxGL = { ...MGLModule }; // static methods MapboxGL.requestAndroidLocationPermissions = requestAndroidLocationPermissions; diff --git a/javascript/utils/Logger.web.tsx b/javascript/utils/Logger.web.tsx new file mode 100644 index 000000000..652782b6c --- /dev/null +++ b/javascript/utils/Logger.web.tsx @@ -0,0 +1,107 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ +type LogMessage = { + level: LogLevel; + message: string; + tag: string; +}; +type LogCallback = (log: LogMessage) => boolean; +type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose'; + +class Logger { + static instance: Logger | null = null; + + level: LogLevel = 'info'; + logCallback: LogCallback | null; + startedCount = 0; + + static sharedInstance() { + if (this.instance === null) { + this.instance = new Logger(); + } + return this.instance; + } + + constructor() { + this.logCallback = null; + } + + /** + * Set custom logger function. + * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then + * default logging will take place. + */ + static setLogCallback(logCallback: LogCallback) { + this.sharedInstance().setLogCallback(logCallback); + } + + /** + * Set custom logger function. + * @param {Logger~logCallback} logCallback - callback taking a log object as param. If callback return falsy value then + * default logging will take place. + */ + setLogCallback(logCallback: LogCallback) { + this.logCallback = logCallback; + } + + /** + * This callback is displayed as part of the Requester class. + * @callback Logger~logCallback + * @param {object} log + * @param {string} log.message - the message of the log + * @param {string} log.level - log level + * @param {string} log.tag - optional tag used on android + */ + + /** + * setLogLevel + * @param {LogLevel} level + */ + static setLogLevel(level: LogLevel) { + this.sharedInstance().level = level; + } + + start() {} + + stop() {} + + subscribe() { + //TODO + } + + unsubscribe() { + //TODO + } + + effectiveLevel(log: LogMessage): LogLevel { + const { level, message, tag } = log; + + if (level === 'warning') { + if ( + tag === 'Mbgl-HttpRequest' && + message.startsWith('Request failed due to a permanent error: Canceled') + ) { + // this seems to happening too much to show a warning every time + return 'info'; + } + } + return level; + } + + onLog(log: LogMessage) { + if (!this.logCallback || !this.logCallback(log)) { + const { message } = log; + const level = this.effectiveLevel(log); + if (level === 'error') { + console.error('Mapbox error', message, log); + } else if (level === 'warning') { + console.warn('Mapbox warning', message, log); + } else { + console.log(`Mapbox [${level}]`, message, log); + } + } + } +} + +Logger.sharedInstance().start(); + +export default Logger; diff --git a/javascript/utils/MGLModule.js b/javascript/utils/MGLModule.js new file mode 100644 index 000000000..245d34168 --- /dev/null +++ b/javascript/utils/MGLModule.js @@ -0,0 +1,8 @@ +import { NativeModules, Platform } from 'react-native'; + +export default Platform.select({ + native: () => NativeModules.MGLModule, + web: () => { + return require('./MGLModuleForWeb').default; + }, +})(); diff --git a/javascript/utils/StyleValue.ts b/javascript/utils/StyleValue.ts index 30774dad5..363cbeb8a 100644 --- a/javascript/utils/StyleValue.ts +++ b/javascript/utils/StyleValue.ts @@ -1,5 +1,4 @@ -import { processColor } from 'react-native'; -import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; +import { processColor, Image } from 'react-native'; import { getStyleType } from './styleMap'; import BridgeValue from './BridgeValue'; @@ -30,7 +29,7 @@ export function transformStyle( if (styleType === 'color' && typeof rawStyle === 'string') { rawStyle = processColor(rawStyle); } else if (styleType === 'image' && typeof rawStyle === 'number') { - rawStyle = resolveAssetSource(rawStyle) || {}; + rawStyle = Image.resolveAssetSource(rawStyle) || {}; } const bridgeValue = new BridgeValue(rawStyle); diff --git a/javascript/web/Camera.js b/javascript/web/Camera.js index ffd9eb8c6..e614514d0 100644 --- a/javascript/web/Camera.js +++ b/javascript/web/Camera.js @@ -27,5 +27,7 @@ class Camera extends React.Component { } } Camera.contextType = MapContext; +Camera.UserTrackingModes = []; +export { Camera }; export default Camera; From b85b120c99ee553d1bad38a1485d7862a4e246ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= Date: Sun, 21 Aug 2022 20:01:09 +0200 Subject: [PATCH 3/3] chore(web): put web related stuff to a separate directory --- .eslintrc.js | 2 +- example/babel.config.js | 2 +- example/ios/Podfile.lock | 6 --- example/rnmapbox.web.symlink | 1 + example/src/examples/Camera/Fit.js | 2 +- javascript/components/Atmosphere.web.tsx | 3 -- javascript/components/BackgroundLayer.web.js | 3 -- javascript/components/Callout.web.js | 3 -- javascript/components/Camera.web.js | 4 -- javascript/components/CircleLayer.web.js | 3 -- .../components/FillExtrusionLayer.web.js | 3 -- javascript/components/FillLayer.web.js | 3 -- javascript/components/HeatmapLayer.web.js | 3 -- javascript/components/ImageSource.web.js | 3 -- javascript/components/Images.web.js | 3 -- javascript/components/Light.web.js | 3 -- javascript/components/LineLayer.web.js | 3 -- javascript/components/MapView.web.js | 3 -- javascript/components/MarkerView.web.js | 3 -- .../components/NativeUserLocation.web.js | 3 -- javascript/components/PointAnnotation.web.js | 3 -- javascript/components/RasterDemSource.web.js | 3 -- javascript/components/RasterLayer.web.js | 3 -- javascript/components/RasterSource.web.js | 3 -- javascript/components/ShapeSource.web.js | 3 -- javascript/components/SkyLayer.web.js | 3 -- javascript/components/SymbolLayer.web.js | 3 -- javascript/components/Terrain.web.js | 3 -- javascript/components/VectorSource.web.js | 3 -- javascript/index.js | 5 ++- javascript/index.web.js | 2 + javascript/utils/MGLModule.js | 8 ---- javascript/utils/MGLModuleForWeb.js | 3 -- javascript/utils/MGLModuleForWeb.web.js | 3 -- javascript/web/Camera.js | 33 -------------- javascript/web/MapView.js | 45 ------------------- .../web/{MGLModule.js => MapboxModule.js} | 4 +- javascript/web/index.js | 18 ++++++++ .../Logger.web.tsx => web/utils/Logger.ts} | 0 package.json | 1 + scripts/autogenHelpers/DocJSONBuilder.js | 2 +- 41 files changed, 31 insertions(+), 179 deletions(-) create mode 120000 example/rnmapbox.web.symlink delete mode 100644 javascript/components/Atmosphere.web.tsx delete mode 100644 javascript/components/BackgroundLayer.web.js delete mode 100644 javascript/components/Callout.web.js delete mode 100644 javascript/components/Camera.web.js delete mode 100644 javascript/components/CircleLayer.web.js delete mode 100644 javascript/components/FillExtrusionLayer.web.js delete mode 100644 javascript/components/FillLayer.web.js delete mode 100644 javascript/components/HeatmapLayer.web.js delete mode 100644 javascript/components/ImageSource.web.js delete mode 100644 javascript/components/Images.web.js delete mode 100644 javascript/components/Light.web.js delete mode 100644 javascript/components/LineLayer.web.js delete mode 100644 javascript/components/MapView.web.js delete mode 100644 javascript/components/MarkerView.web.js delete mode 100644 javascript/components/NativeUserLocation.web.js delete mode 100644 javascript/components/PointAnnotation.web.js delete mode 100644 javascript/components/RasterDemSource.web.js delete mode 100644 javascript/components/RasterLayer.web.js delete mode 100644 javascript/components/RasterSource.web.js delete mode 100644 javascript/components/ShapeSource.web.js delete mode 100644 javascript/components/SkyLayer.web.js delete mode 100644 javascript/components/SymbolLayer.web.js delete mode 100644 javascript/components/Terrain.web.js delete mode 100644 javascript/components/VectorSource.web.js create mode 100644 javascript/index.web.js delete mode 100644 javascript/utils/MGLModule.js delete mode 100644 javascript/utils/MGLModuleForWeb.js delete mode 100644 javascript/utils/MGLModuleForWeb.web.js delete mode 100644 javascript/web/Camera.js delete mode 100644 javascript/web/MapView.js rename javascript/web/{MGLModule.js => MapboxModule.js} (82%) create mode 100644 javascript/web/index.js rename javascript/{utils/Logger.web.tsx => web/utils/Logger.ts} (100%) diff --git a/.eslintrc.js b/.eslintrc.js index a3d4b6a2e..4281e44b2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -79,7 +79,7 @@ module.exports = { 'fp/no-mutating-methods': 'warn', 'react-native/no-inline-styles': 0, }, - ignorePatterns: ['**/rnmapbox.symlink'], + ignorePatterns: ['**/rnmapbox.web.symlink'], overrides: [ { // Match TypeScript Files diff --git a/example/babel.config.js b/example/babel.config.js index 568169739..ec405f154 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -14,7 +14,7 @@ module.exports = (api) => { 'module-resolver', { alias: { - '@rnmapbox/maps': './rnmapbox.symlink', + '@rnmapbox/maps': './rnmapbox.web.symlink', }, }, ] diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 9e37fd212..bf953f582 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -365,8 +365,6 @@ PODS: - React-jsi (= 0.69.4) - React-logger (= 0.69.4) - React-perflogger (= 0.69.4) - - RNGestureHandler (2.5.0): - - React-Core - rnmapbox-maps (10.0.0-beta.28): - MapboxMaps (~> 10.7.0) - React @@ -448,7 +446,6 @@ DEPENDENCIES: - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - rnmapbox-maps (from `../../`) - RNScreens (from `../node_modules/react-native-screens`) - RNSVG (from `../node_modules/react-native-svg`) @@ -543,8 +540,6 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" ReactCommon: :path: "../node_modules/react-native/ReactCommon" - RNGestureHandler: - :path: "../node_modules/react-native-gesture-handler" rnmapbox-maps: :path: "../../" RNScreens: @@ -606,7 +601,6 @@ SPEC CHECKSUMS: React-RCTVibration: 9adb4a3cbb598d1bbd46a05256f445e4b8c70603 React-runtimeexecutor: 61ee22a8cdf8b6bb2a7fb7b4ba2cc763e5285196 ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83 - RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50 rnmapbox-maps: ac661ea2e71df538a581365ae65a142178e28d77 RNScreens: ee31ecdf23fe81e93c74feaa086cf173d758ab58 RNSVG: ce9d996113475209013317e48b05c21ee988d42e diff --git a/example/rnmapbox.web.symlink b/example/rnmapbox.web.symlink new file mode 120000 index 000000000..8fb16c871 --- /dev/null +++ b/example/rnmapbox.web.symlink @@ -0,0 +1 @@ +../javascript/web \ No newline at end of file diff --git a/example/src/examples/Camera/Fit.js b/example/src/examples/Camera/Fit.js index b4939f1a8..2f5a04c5b 100755 --- a/example/src/examples/Camera/Fit.js +++ b/example/src/examples/Camera/Fit.js @@ -117,7 +117,7 @@ class Fit extends React.Component { backgroundColor: button.selected ? 'coral' : '#d8d8d8', borderRadius: 5, }} - onPress={button.onPress} + onPress={button.onPress} > {button.title} diff --git a/javascript/components/Atmosphere.web.tsx b/javascript/components/Atmosphere.web.tsx deleted file mode 100644 index 570257ac5..000000000 --- a/javascript/components/Atmosphere.web.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('Atmosphere'); diff --git a/javascript/components/BackgroundLayer.web.js b/javascript/components/BackgroundLayer.web.js deleted file mode 100644 index f4c336931..000000000 --- a/javascript/components/BackgroundLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('BackgroundLayer'); diff --git a/javascript/components/Callout.web.js b/javascript/components/Callout.web.js deleted file mode 100644 index ef9ee6685..000000000 --- a/javascript/components/Callout.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('Callout'); diff --git a/javascript/components/Camera.web.js b/javascript/components/Camera.web.js deleted file mode 100644 index 135669399..000000000 --- a/javascript/components/Camera.web.js +++ /dev/null @@ -1,4 +0,0 @@ -import Camera from '../web/Camera'; - -export { Camera }; -export default Camera; diff --git a/javascript/components/CircleLayer.web.js b/javascript/components/CircleLayer.web.js deleted file mode 100644 index aea96a41a..000000000 --- a/javascript/components/CircleLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('CircleLayer'); diff --git a/javascript/components/FillExtrusionLayer.web.js b/javascript/components/FillExtrusionLayer.web.js deleted file mode 100644 index 119693ddd..000000000 --- a/javascript/components/FillExtrusionLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('FillExtrusionLayer'); diff --git a/javascript/components/FillLayer.web.js b/javascript/components/FillLayer.web.js deleted file mode 100644 index eca3e61f5..000000000 --- a/javascript/components/FillLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('FillLayer'); diff --git a/javascript/components/HeatmapLayer.web.js b/javascript/components/HeatmapLayer.web.js deleted file mode 100644 index 3a76f3859..000000000 --- a/javascript/components/HeatmapLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('HeatmapLayer'); diff --git a/javascript/components/ImageSource.web.js b/javascript/components/ImageSource.web.js deleted file mode 100644 index ca370ef1b..000000000 --- a/javascript/components/ImageSource.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('ImageSource'); diff --git a/javascript/components/Images.web.js b/javascript/components/Images.web.js deleted file mode 100644 index 4fb731da4..000000000 --- a/javascript/components/Images.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('Images'); diff --git a/javascript/components/Light.web.js b/javascript/components/Light.web.js deleted file mode 100644 index e6a96499f..000000000 --- a/javascript/components/Light.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('Light'); diff --git a/javascript/components/LineLayer.web.js b/javascript/components/LineLayer.web.js deleted file mode 100644 index f06422a6d..000000000 --- a/javascript/components/LineLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('LineLayer'); diff --git a/javascript/components/MapView.web.js b/javascript/components/MapView.web.js deleted file mode 100644 index 2f1ed75f4..000000000 --- a/javascript/components/MapView.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import MapView from '../web/MapView'; - -export default MapView; diff --git a/javascript/components/MarkerView.web.js b/javascript/components/MarkerView.web.js deleted file mode 100644 index e03444a77..000000000 --- a/javascript/components/MarkerView.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('MarkerView'); diff --git a/javascript/components/NativeUserLocation.web.js b/javascript/components/NativeUserLocation.web.js deleted file mode 100644 index e327ea65e..000000000 --- a/javascript/components/NativeUserLocation.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('NativeUserLocation'); diff --git a/javascript/components/PointAnnotation.web.js b/javascript/components/PointAnnotation.web.js deleted file mode 100644 index 5264b3ad7..000000000 --- a/javascript/components/PointAnnotation.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('PointAnnotaiton'); diff --git a/javascript/components/RasterDemSource.web.js b/javascript/components/RasterDemSource.web.js deleted file mode 100644 index 9406ca048..000000000 --- a/javascript/components/RasterDemSource.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('RasterDemSource'); diff --git a/javascript/components/RasterLayer.web.js b/javascript/components/RasterLayer.web.js deleted file mode 100644 index 5c60c302f..000000000 --- a/javascript/components/RasterLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('RasterLayer'); diff --git a/javascript/components/RasterSource.web.js b/javascript/components/RasterSource.web.js deleted file mode 100644 index 570e3b437..000000000 --- a/javascript/components/RasterSource.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('RasterSource'); diff --git a/javascript/components/ShapeSource.web.js b/javascript/components/ShapeSource.web.js deleted file mode 100644 index 34b57fc99..000000000 --- a/javascript/components/ShapeSource.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('ShapeSource'); diff --git a/javascript/components/SkyLayer.web.js b/javascript/components/SkyLayer.web.js deleted file mode 100644 index a684482b5..000000000 --- a/javascript/components/SkyLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('SkyLayer'); diff --git a/javascript/components/SymbolLayer.web.js b/javascript/components/SymbolLayer.web.js deleted file mode 100644 index 97fbf59ea..000000000 --- a/javascript/components/SymbolLayer.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('SymbolLayer'); diff --git a/javascript/components/Terrain.web.js b/javascript/components/Terrain.web.js deleted file mode 100644 index f266acf2f..000000000 --- a/javascript/components/Terrain.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('Terrain'); diff --git a/javascript/components/VectorSource.web.js b/javascript/components/VectorSource.web.js deleted file mode 100644 index 82746aa3e..000000000 --- a/javascript/components/VectorSource.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnimplementedComponent from '../web/UnimplementedComponent'; - -export default UnimplementedComponent('VectorSource'); diff --git a/javascript/index.js b/javascript/index.js index 97892b859..00406a90e 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,3 +1,5 @@ +import { NativeModules } from 'react-native'; + import { Camera } from './components/Camera'; import { Atmosphere } from './components/Atmosphere'; import MapView from './components/MapView'; @@ -34,10 +36,9 @@ import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtract import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray'; import Style from './components/Style'; import Logger from './utils/Logger'; -import MGLModule from './utils/MGLModule'; import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions'; -const MapboxGL = { ...MGLModule }; +const MapboxGL = { ...NativeModules.MGLModule }; // static methods MapboxGL.requestAndroidLocationPermissions = requestAndroidLocationPermissions; diff --git a/javascript/index.web.js b/javascript/index.web.js new file mode 100644 index 000000000..35013683c --- /dev/null +++ b/javascript/index.web.js @@ -0,0 +1,2 @@ +export * from './web'; +export { default } from './web'; diff --git a/javascript/utils/MGLModule.js b/javascript/utils/MGLModule.js deleted file mode 100644 index 245d34168..000000000 --- a/javascript/utils/MGLModule.js +++ /dev/null @@ -1,8 +0,0 @@ -import { NativeModules, Platform } from 'react-native'; - -export default Platform.select({ - native: () => NativeModules.MGLModule, - web: () => { - return require('./MGLModuleForWeb').default; - }, -})(); diff --git a/javascript/utils/MGLModuleForWeb.js b/javascript/utils/MGLModuleForWeb.js deleted file mode 100644 index 4d4ee549d..000000000 --- a/javascript/utils/MGLModuleForWeb.js +++ /dev/null @@ -1,3 +0,0 @@ -/** - * Empty - only exits as metro bundler has issue with Platform select in index.js - */ diff --git a/javascript/utils/MGLModuleForWeb.web.js b/javascript/utils/MGLModuleForWeb.web.js deleted file mode 100644 index fafa83aa0..000000000 --- a/javascript/utils/MGLModuleForWeb.web.js +++ /dev/null @@ -1,3 +0,0 @@ -import MGLModule from '../web/MGLModule'; - -export default MGLModule; diff --git a/javascript/web/Camera.js b/javascript/web/Camera.js deleted file mode 100644 index e614514d0..000000000 --- a/javascript/web/Camera.js +++ /dev/null @@ -1,33 +0,0 @@ -/* eslint-disable react/prop-types */ -import React from 'react'; - -import MapContext from './MapContext'; - -class Camera extends React.Component { - componentDidMount() { - let { map } = this.context; - let { centerCoordinate } = this.props; - if (centerCoordinate) { - map.flyTo({ center: centerCoordinate }); - } - } - - fitBounds( - northEastCoordinates, - southWestCoordinates, - padding = 0, - animationDuration = 0.0, - ) { - let { map } = this.context; - map.fitBounds([northEastCoordinates, southWestCoordinates]); - } - - render() { - return <>; - } -} -Camera.contextType = MapContext; -Camera.UserTrackingModes = []; - -export { Camera }; -export default Camera; diff --git a/javascript/web/MapView.js b/javascript/web/MapView.js deleted file mode 100644 index 62af29f00..000000000 --- a/javascript/web/MapView.js +++ /dev/null @@ -1,45 +0,0 @@ -/* eslint-disable react/no-did-mount-set-state */ -/* eslint-disable react/prop-types */ -/* eslint-disable react-native/no-inline-styles */ -import React from 'react'; -import mapboxgl from 'mapbox-gl'; - -import MapContext from './MapContext'; - -/** - * MapView backed by Mapbox GL KS - */ -class MapView extends React.Component { - state = {}; - - componentDidMount() { - let { styleURL } = this.props; - 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 ( -
(this.mapContainer = el)} - > - {map && ( -
- - {children} - -
- )} -
- ); - } -} - -export default MapView; diff --git a/javascript/web/MGLModule.js b/javascript/web/MapboxModule.js similarity index 82% rename from javascript/web/MGLModule.js rename to javascript/web/MapboxModule.js index 0e3958ebe..a0505bf4d 100644 --- a/javascript/web/MGLModule.js +++ b/javascript/web/MapboxModule.js @@ -1,6 +1,6 @@ import mapboxgl from 'mapbox-gl'; -const MGLModule = { +const MapboxModule = { LineJoin: {}, StyleURL: { @@ -13,4 +13,4 @@ const MGLModule = { }, }; -export default MGLModule; +export default MapboxModule; diff --git a/javascript/web/index.js b/javascript/web/index.js new file mode 100644 index 000000000..8729efa24 --- /dev/null +++ b/javascript/web/index.js @@ -0,0 +1,18 @@ +import MapboxModule from './MapboxModule'; +import Camera from './components/Camera'; +import MapView from './components/MapView'; +import Logger from './utils/Logger'; + +const ExportedComponents = { + Camera, + MapView, + Logger, +}; + +const Mapbox = { + ...MapboxModule, + ...ExportedComponents, +}; + +export { Camera, MapView, Logger }; +export default Mapbox; diff --git a/javascript/utils/Logger.web.tsx b/javascript/web/utils/Logger.ts similarity index 100% rename from javascript/utils/Logger.web.tsx rename to javascript/web/utils/Logger.ts diff --git a/package.json b/package.json index 77eef97f5..86dc70807 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "author": "React Native Mapbox Team", "main": "./javascript/index.js", + "browser": "./javascript/index.web.js", "keywords": [ "gl", "ios", diff --git a/scripts/autogenHelpers/DocJSONBuilder.js b/scripts/autogenHelpers/DocJSONBuilder.js index 165c1309f..b835230e8 100644 --- a/scripts/autogenHelpers/DocJSONBuilder.js +++ b/scripts/autogenHelpers/DocJSONBuilder.js @@ -23,7 +23,7 @@ const IGNORE_FILES = [ 'AbstractSource', 'NativeBridgeComponent', ]; -const IGNORE_PATTERN = /\.web$/; +const IGNORE_PATTERN = /\.web\./; const IGNORE_METHODS = ['setNativeProps'];