MapView is broken on web
See original GitHub issueš Bug Report
Summary of Issue (just a few sentences)
Iāve seen this issue brought up before, but have found no solutions. MapView doesnāt work with Expo running on the web. You can see this just by trying the Snack linked in this documentation:
https://docs.expo.io/versions/latest/sdk/map-view/
The error seems to either be (Snack):
(0 , g.requireNativeComponent) is not a function
Evaluating react-native-maps.js
Evaluating App.js
Loading App.js
Or (locally):
TypeError: Object(...) is not a function
Environment - output of expo diagnostics
& the platform(s) youāre targeting
Expo CLI 3.21.5 environment info: System: OS: macOS Mojave 10.14.6 Shell: 3.2.57 - /bin/bash Binaries: Node: 13.3.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.13.2 - /usr/local/bin/npm IDEs: Xcode: /undefined - /usr/bin/xcodebuild npmPackages: @expo/webpack-config: ^0.12.14 => 0.12.14 expo: ^37.0.12 => 37.0.12 react: ~16.9.0 => 16.9.0 react-dom: ~16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 react-native-web: ~0.11.7 => 0.11.7 npmGlobalPackages: expo-cli: 3.21.5
Reproducible Demo
To Reproduce On Expo Web
...
import { MapView } from 'react-native-maps';
<View style={styles.mapContainer}>
<MapView
style={{ marginTop: 20, width: "80%", height:400 }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
}}
/>
</View>
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:10 (3 by maintainers)
Unfortunately I donāt have time to work on this feature right now. Itās a really large project with lotās of differences between web and native. The developer interface should probably change as well to be more universal and support any arbitrary map service (i.e. Leaflet, Mapbox, Apple maps, Google maps).
The best solution would be to create a new maps package, but that would take a ton of time to create and maintain. I would recommend using the extremely unstable fork for now.
the maker works on system browsers, however, when I try to use markers on mobile browsers, it keeps showing a blank screen without any error whatsoever