From 6b8c0679318db516a5d0a9e75ac4c02c74e3be5a Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 5 May 2020 21:15:11 +0200 Subject: [PATCH 01/10] Web support --- .gitignore | 3 + example/app.json | 9 ++- example/babel.config.js | 79 ++++++++++++------- example/index.js | 7 +- example/package.json | 15 +++- example/rnmbgl | 1 + 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.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 | 13 +-- javascript/utils/index.js | 12 +-- javascript/utils/viewPropTypes.js | 6 ++ javascript/web/Camera.js | 33 ++++++++ javascript/web/MGLModule.js | 16 ++++ javascript/web/MapContext.js | 5 ++ javascript/web/MapView.js | 43 ++++++++++ javascript/web/UnimplementedComponent.js | 10 +++ scripts/autogenHelpers/DocJSONBuilder.js | 11 ++- 34 files changed, 267 insertions(+), 53 deletions(-) create mode 120000 example/rnmbgl 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/viewPropTypes.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/.gitignore b/.gitignore index 707a68d72..0303df865 100644 --- a/.gitignore +++ b/.gitignore @@ -53,6 +53,9 @@ node_modules package-lock.json /example/package-lock.json +# Expo +.expo + # OS X .DS_Store diff --git a/example/app.json b/example/app.json index 3b3a55891..1851a66e5 100644 --- a/example/app.json +++ b/example/app.json @@ -1,4 +1,11 @@ { "name": "RNMapboxGLExample", - "displayName": "RNMapboxGLExample" + "displayName": "RNMapboxGLExample", + "expo": { + "name": "RNMapboxGLExample", + "privacy": "unlisted", + "sdkVersion": "38.0.0", + "version": "1.0.0", + "platforms": ["ios", "android", "web"] + } } \ No newline at end of file diff --git a/example/babel.config.js b/example/babel.config.js index 351245114..76eff674e 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -1,31 +1,52 @@ -module.exports = { - presets: ['module:metro-react-native-babel-preset'], - plugins: [ - '@babel/plugin-transform-modules-commonjs', - [ - 'module-resolver', - { - alias: { - '@react-native-mapbox-gl/maps': '../javascript/index', - // from maps/package.json - react: './node_modules/react', - 'react-native': './node_modules/react-native', - '@turf/helpers': './node_modules/@turf/helpers', - '@turf/distance': './node_modules/@turf/distance', - '@turf/nearest-point-on-line': - './node_modules/@turf/nearest-point-on-line', - '@turf/length': './node_modules/@turf/length', - '@turf/along': './node_modules/@turf/along', - '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport', - debounce: './node_modules/debounce', +module.exports = (api) => { + const isWeb = api.caller(isTargetWeb); - '@babel': './node_modules/@babel', - fbjs: './node_modules/fbjs', - 'hoist-non-react-statics': './node_modules/hoist-non-react-statics', - invariant: './node_modules/invariant', - 'prop-types': './node_modules/prop-types', - }, - }, - ], - ].filter(Boolean), + return { + // presets: ['module:metro-react-native-babel-preset'], + presets: ['babel-preset-expo'], + plugins: [ + '@babel/plugin-transform-modules-commonjs', + isWeb + ? [ + 'module-resolver', + { + alias: { + '@react-native-mapbox-gl/maps': './rnmbgl/javascript/index.js', + // 'react-native-web/dist/exports/ViewPropTypes': + // './web/ViewPropTypes.js', + }, + }, + ] + : [ + 'module-resolver', + { + alias: { + '@react-native-mapbox-gl/maps': '../javascript/index', + // from maps/package.json + react: './node_modules/react', + 'react-native': './node_modules/react-native', + '@turf/helpers': './node_modules/@turf/helpers', + '@turf/distance': './node_modules/@turf/distance', + '@turf/nearest-point-on-line': + './node_modules/@turf/nearest-point-on-line', + '@turf/length': './node_modules/@turf/length', + '@turf/along': './node_modules/@turf/along', + '@mapbox/geo-viewport': './node_modules/@mapbox/geo-viewport', + debounce: './node_modules/debounce', + + '@babel': './node_modules/@babel', + fbjs: './node_modules/fbjs', + 'hoist-non-react-statics': + './node_modules/hoist-non-react-statics', + invariant: './node_modules/invariant', + 'prop-types': './node_modules/prop-types', + }, + }, + ], + ].filter(Boolean), + }; }; + +function isTargetWeb(caller) { + return caller && caller.name === 'babel-loader'; +} diff --git a/example/index.js b/example/index.js index 9d1470597..9e88fd764 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/package.json b/example/package.json index 1996682b6..c6402d6f9 100644 --- a/example/package.json +++ b/example/package.json @@ -27,8 +27,8 @@ "npm": "^6.13.4", "prop-types": "^15.7.2", "react": "16.11.0", - "react-native": "0.62.1", - "react-native-elements": "^1.1.0", + "react-native": "0.62.2", + "react-native-elements": "^1.2.7", "react-native-safe-area-view": "^0.13.1", "react-native-vector-icons": "^6.6.0", @@ -42,7 +42,13 @@ "url": "^0.11.0", "debounce": "^1.2.0", - "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0" + "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0", + + "@react-navigation/web": "^1.0.0-alpha.9", + "react-native-web": "^0.11.7", + "expo": "^37.0.8", + "react-dom": "^16.13.1", + "mapbox-gl": "^1.10.0" }, "devDependencies": { "@babel/core": "^7.6.2", @@ -54,7 +60,8 @@ "babel-plugin-module-resolver": "^3.2.0", "jest": "^24.9.0", "jetifier": "^1.6.4", - "metro-react-native-babel-preset": "^0.56.0", + "metro-react-native-babel-preset": "^0.58.0", + "babel-preset-expo": "8.1.0", "react-test-renderer": "16.9.0" }, "jest": { diff --git a/example/rnmbgl b/example/rnmbgl new file mode 120000 index 000000000..a96aa0ea9 --- /dev/null +++ b/example/rnmbgl @@ -0,0 +1 @@ +.. \ No newline at end of file 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.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 9d7231453..80acd2266 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,8 +1,4 @@ -import { - Animated as RNAnimated, - NativeModules, - PermissionsAndroid, -} from 'react-native'; +import {NativeModules, Platform, PermissionsAndroid} from 'react-native'; import {isAndroid} from './utils'; import MapView from './components/MapView'; @@ -37,7 +33,12 @@ import AnimatedExtractCoordinateFromArray from './utils/animated/AnimatedExtract import AnimatedRouteCoordinatesArray from './utils/animated/AnimatedRouteCoordinatesArray'; import Logger from './utils/Logger'; -const MapboxGL = {...NativeModules.MGLModule}; +const MapboxGL = Platform.select({ + native: () => ({...NativeModules.MGLModule}), + web: () => { + return require('./web/MGLModule').default; + }, +})(); // static methods MapboxGL.requestAndroidLocationPermissions = async function () { diff --git a/javascript/utils/index.js b/javascript/utils/index.js index e811fe6d4..11ea721a8 100644 --- a/javascript/utils/index.js +++ b/javascript/utils/index.js @@ -1,11 +1,7 @@ import React from 'react'; -import { - ViewPropTypes, - View, - NativeModules, - findNodeHandle, - Platform, -} from 'react-native'; +import {NativeModules, findNodeHandle, Platform} from 'react-native'; + +import viewPropTypes from './viewPropTypes'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; function getAndroidManagerInstance(module) { @@ -20,7 +16,7 @@ function getIosManagerInstance(module) { return NativeModules[getIOSModuleName(module)]; } -export const viewPropTypes = ViewPropTypes || View.props; +export {viewPropTypes}; export function isAndroid() { return Platform.OS === 'android'; diff --git a/javascript/utils/viewPropTypes.js b/javascript/utils/viewPropTypes.js new file mode 100644 index 000000000..ee92e6b77 --- /dev/null +++ b/javascript/utils/viewPropTypes.js @@ -0,0 +1,6 @@ +import { + ViewPropTypes, + View, +} from 'react-native'; + +export default ViewPropTypes || View.props; diff --git a/javascript/web/Camera.js b/javascript/web/Camera.js new file mode 100644 index 000000000..52d675708 --- /dev/null +++ b/javascript/web/Camera.js @@ -0,0 +1,33 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; + +import MapContext from './MapContext'; + +class Camera extends React.Component { + componentDidMount() { + let {map} = this.context; + console.log("MapContext", MapContext); + console.log("this.context", 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..bbb015b91 --- /dev/null +++ b/javascript/web/MapView.js @@ -0,0 +1,43 @@ +/* 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 8e92046dc..7a61fc56d 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']; @@ -214,9 +215,11 @@ class DocJSONBuilder { } fileName = fileName.replace('.js', ''); - if (IGNORE_FILES.includes(fileName)) { - next(); - return; + if ( + IGNORE_FILES.includes(fileName) || + fileName.match(IGNORE_PATTERN) + ) { + return next(); } results[fileName] = docgen.parse(content, undefined, undefined, { @@ -224,7 +227,7 @@ class DocJSONBuilder { }); this.postprocess(results[fileName], fileName); - next(); + return next(); }, () => resolve(), ); From 0d8a4d554ee93a5f640fd2f53a61e9dc7df448a1 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Wed, 6 May 2020 13:44:52 +0200 Subject: [PATCH 02/10] Mock select --- __tests__/__mocks__/react-native.mock.js | 13 +++++++++++++ example/babel.config.js | 2 -- javascript/web/Camera.js | 2 -- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/__tests__/__mocks__/react-native.mock.js b/__tests__/__mocks__/react-native.mock.js index 9a822ecd3..d02d1d633 100644 --- a/__tests__/__mocks__/react-native.mock.js +++ b/__tests__/__mocks__/react-native.mock.js @@ -8,3 +8,16 @@ jest.mock('NativeEventEmitter', () => { MockEventEmitter.prototype.removeListener = function () {}; return MockEventEmitter; }); + +jest.mock('react-native/Libraries/Utilities/Platform', () => ({ + OS: 'android', // or 'ios' + 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/babel.config.js b/example/babel.config.js index 76eff674e..9564b07c8 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -12,8 +12,6 @@ module.exports = (api) => { { alias: { '@react-native-mapbox-gl/maps': './rnmbgl/javascript/index.js', - // 'react-native-web/dist/exports/ViewPropTypes': - // './web/ViewPropTypes.js', }, }, ] diff --git a/javascript/web/Camera.js b/javascript/web/Camera.js index 52d675708..b342c75db 100644 --- a/javascript/web/Camera.js +++ b/javascript/web/Camera.js @@ -6,8 +6,6 @@ import MapContext from './MapContext'; class Camera extends React.Component { componentDidMount() { let {map} = this.context; - console.log("MapContext", MapContext); - console.log("this.context", this.context); let {centerCoordinate} = this.props; if (centerCoordinate) { map.flyTo({center: centerCoordinate}); From 02687a887958eaf7b630cd2b9efe6e41f6088982 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Wed, 6 May 2020 14:17:49 +0200 Subject: [PATCH 03/10] Added mapbox gl js for web support to package.json --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ccf6622fc..7339c0c57 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,9 @@ "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0", "@turf/helpers": ">= 4.6.0 <7.0.0", "@turf/length": ">= 4.6.0 <7.0.0", - "debounce": "^1.2.0" + "debounce": "^1.2.0", + + "mapbox-gl": "^1.10.0" }, "devDependencies": { "@babel/core": "7.5.0", From df4661a73c71101bd52a617922bdd2cf047d6ed4 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Mon, 18 May 2020 20:57:59 +0200 Subject: [PATCH 04/10] Work around for bundler issue with web --- example/metro.config.js | 5 ++++- javascript/index.js | 2 +- javascript/utils/MGLModuleForWeb.js | 3 +++ javascript/utils/MGLModuleForWeb.web.js | 3 +++ package.json | 4 +--- 5 files changed, 12 insertions(+), 5 deletions(-) create mode 100644 javascript/utils/MGLModuleForWeb.js create mode 100644 javascript/utils/MGLModuleForWeb.web.js diff --git a/example/metro.config.js b/example/metro.config.js index b76639dbe..896b1360a 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -26,7 +26,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/javascript/index.js b/javascript/index.js index 80acd2266..5585314ce 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -36,7 +36,7 @@ import Logger from './utils/Logger'; const MapboxGL = Platform.select({ native: () => ({...NativeModules.MGLModule}), web: () => { - return require('./web/MGLModule').default; + return require('./utils/MGLModuleForWeb').default; }, })(); 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/package.json b/package.json index 7339c0c57..ccf6622fc 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,7 @@ "@turf/nearest-point-on-line": ">= 4.0.0 <7.0.0", "@turf/helpers": ">= 4.6.0 <7.0.0", "@turf/length": ">= 4.6.0 <7.0.0", - "debounce": "^1.2.0", - - "mapbox-gl": "^1.10.0" + "debounce": "^1.2.0" }, "devDependencies": { "@babel/core": "7.5.0", From 3f791fada69fd972fa92147f68d66463c96eed35 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Mon, 18 May 2020 22:15:12 +0200 Subject: [PATCH 05/10] Try lowering rn version --- example/babel.config.js | 4 ++-- example/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/example/babel.config.js b/example/babel.config.js index 9564b07c8..9f827ebd4 100644 --- a/example/babel.config.js +++ b/example/babel.config.js @@ -2,8 +2,8 @@ module.exports = (api) => { const isWeb = api.caller(isTargetWeb); return { - // presets: ['module:metro-react-native-babel-preset'], - presets: ['babel-preset-expo'], + presets: ['module:metro-react-native-babel-preset'], + // presets: ['babel-preset-expo'], plugins: [ '@babel/plugin-transform-modules-commonjs', isWeb diff --git a/example/package.json b/example/package.json index c6402d6f9..d2a58b6b9 100644 --- a/example/package.json +++ b/example/package.json @@ -27,7 +27,7 @@ "npm": "^6.13.4", "prop-types": "^15.7.2", "react": "16.11.0", - "react-native": "0.62.2", + "react-native": "0.62.1", "react-native-elements": "^1.2.7", "react-native-safe-area-view": "^0.13.1", "react-native-vector-icons": "^6.6.0", From 4b888fe10a641f0d549794f3dd1439524d7a3978 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 19 May 2020 07:44:46 +0200 Subject: [PATCH 06/10] resolveAssetSource => Image.resolveAssetSource --- .travis.yml | 3 +++ javascript/components/Images.js | 5 ++--- javascript/utils/index.js | 5 ++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/.travis.yml b/.travis.yml index a2b66245c..820ede9f6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -66,6 +66,9 @@ script: - | if [ "$TRAVIS_OS_NAME" == "linux" ]; then cd $TRAVIS_BUILD_DIR/example/android + pwd + ls -la ../node_modules/react-native/Libraries/Image/AssetRegistry.js + ls -la ../../node_modules/react-native/Libraries/Image/AssetRegistry.js TERM=dumb ./gradlew assemble fi - cd $TRAVIS_BUILD_DIR diff --git a/javascript/components/Images.js b/javascript/components/Images.js index f77d48c84..f11c7bfd0 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/utils/index.js b/javascript/utils/index.js index 11ea721a8..0fb9a080c 100644 --- a/javascript/utils/index.js +++ b/javascript/utils/index.js @@ -1,8 +1,7 @@ import React from 'react'; -import {NativeModules, findNodeHandle, Platform} from 'react-native'; +import {NativeModules, findNodeHandle, Platform, Image} from 'react-native'; import viewPropTypes from './viewPropTypes'; -import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; function getAndroidManagerInstance(module) { const haveViewManagerConfig = @@ -98,7 +97,7 @@ export function cloneReactChildrenWithProps(children, propsToAdd = {}) { } export function resolveImagePath(imageRef) { - const res = resolveAssetSource(imageRef); + const res = Image.resolveAssetSource(imageRef); return res.uri; } From b3570505989c3fe79571e2fd54ac5086182cbcd1 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 19 May 2020 07:58:16 +0200 Subject: [PATCH 07/10] Try node upgrade --- .travis.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 820ede9f6..5f598deab 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,7 +3,7 @@ matrix: - language: android jdk: oraclejdk8 before_install: - - nvm install 10.18.1 + - nvm install 12.16.3 - echo yes | sdkmanager "platforms;android-28" - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.21.1 - export PATH=$HOME/.yarn/bin:$PATH From 4324d0f88f4601806cb2b0515d330e17cbd0bacd Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 19 May 2020 08:20:18 +0200 Subject: [PATCH 08/10] More troubleshoot --- .travis.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 5f598deab..2a40f02e6 100644 --- a/.travis.yml +++ b/.travis.yml @@ -68,7 +68,10 @@ script: cd $TRAVIS_BUILD_DIR/example/android pwd ls -la ../node_modules/react-native/Libraries/Image/AssetRegistry.js - ls -la ../../node_modules/react-native/Libraries/Image/AssetRegistry.js + ls -la ../../node_modules/react-native/Libraries/Image/AssetRegistry.js + ls -la ../../ + ls -la ../../node_modules + cat ../../node_modules/react-native/package.json TERM=dumb ./gradlew assemble fi - cd $TRAVIS_BUILD_DIR From ce049d821f1cf5e35b88193c4576f085274a9308 Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 19 May 2020 08:42:27 +0200 Subject: [PATCH 09/10] Added yarn install before example yarn install --- .travis.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 2a40f02e6..74b33b317 100644 --- a/.travis.yml +++ b/.travis.yml @@ -56,6 +56,8 @@ install: gem install xcpretty fi script: +- cd $TRAVIS_BUILD_DIR +- yarn install - | if [ "$TRAVIS_OS_NAME" == "osx" ]; then cd $TRAVIS_BUILD_DIR/example/ios From d0d62600584a1f9092170c00b6158ccf8161294c Mon Sep 17 00:00:00 2001 From: Miklos Fazekas Date: Tue, 19 May 2020 09:51:14 +0200 Subject: [PATCH 10/10] Type upping parent rn version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ccf6622fc..95ca2bb16 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "node-dir": "0.1.17", "react": "16.8.6", "react-docgen": "^5.0.0-beta.1", - "react-native": "0.59.10", + "react-native": "0.62.1", "typescript": "3.8.3", "react-native-testing-library": "^1.11.1", "react-test-renderer": "16.8.3",