Map for React Native Web With Expo and Metro

Question

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.

Answer 1

I found that we can use @teovilla/react-native-web-maps simply with Metro too. To do so, we can create a mymap.web.js and mymap.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 import react-native-maps.

// /components/mymap.web.js
import MapView from "@teovilla/react-native-web-maps";
export default MapView;

// /components/mymap.js
import MapView from 'react-native-maps';
export default MapView;

Now in our code, we can import our component like so (path to adapt) :

import MapView from '../components/mymap';