I am building a hybrid app with React Native Expo. My struggle is that my app needs a map and needs to be functional on mobile and web. To have a map with React Native I found several libraries, but there is always a problem :
- react-native-maps : No support for web. (https://github.com/react-native-maps/react-native-maps)
- @teovilla/react-native-web-maps : Config with Webpack, but I use Metro (to be able to use Expo Router)
- react-native-leaflet : Use Webview, so not compatible for web
- MapBox SDK : cannot be used with Expo Go (https://github.com/rnmapbox/maps/blob/main/plugin/install.md)
I tried all these libraries but I was not being able to achieve the rendering of my map in web.
My goal is just to use a map with React Native Expo in web using Metro. Maybe I'm missing something, but I really don't know how to display a map. Any help is welcome. Thanks in advance.
I found that we can use
@teovilla/react-native-web-maps
simply with Metro too. To do so, we can create amymap.web.js
andmymap.js
component. React Native will be smart enough to pick the proper extension for the platform being built. In the first component we can import@teovilla/react-native-web-maps
and in the second we can importreact-native-maps
.Now in our code, we can import our component like so (path to adapt) :