search

teovillanueva / react-native-web-maps

Cross platform maps for react & react-native 🗺
https://teovillanueva.github.io/react-native-web-maps/
MIT License
57 stars 14 forks source link

refactor: Only import 'react-native-maps' when not on web #20

Closed YoussefHenna closed 1 year ago

YoussefHenna commented 1 year ago

This addresses an issue on expo Snack. Check this example snack.

It crashes on web preview mode with the following error: image

I was able to pinpoint that this was caused whenever react-native-maps is imported on web. Actually importing a component was only happening from within the cluster.tsx, importing types is fine and does not cause any issues. I modified this to conditionally import from react-native-maps only when not on web, otherwise use the normal marker of this package.

This should no longer be needed after https://github.com/react-native-maps/react-native-maps/issues/4383 is fixed. But for now, this workaround will allow this package to be usable in snack.

YoussefHenna commented 1 year ago

@teovillanueva We need this to be able to use it with Draftbit since we rely on snack for a bunch of our stuff. Take a look when you can.

teovillanueva commented 1 year ago

Hey, what do you think of renaming the current marker.tsx to marker.web.tsx and adding a new marker.tsx that has export { Marker } from "react-native-maps" and then in cluster.tsx just importing from ../marker. Let me know if you can try that.

YoussefHenna commented 1 year ago

Good point, that's much cleaner. However in the native marker.tsx we still can't do export { Marker } from "react-native-maps" as that would still trigger the error. I can move the arguable ugly conditional require into that file though, keeping that logic separate from the cluster.tsx.

teovillanueva commented 1 year ago

I think there is still no need to add the condition since webpack will just skip the marker.tsx file and include the marker.web.tsx making the export from react-native-maps dissapear from the web bundle.

YoussefHenna commented 1 year ago

You'd think so. But Snack seems to work differently than a traditional react native app and still throws the error. I'll test it out again, maybe that has changed since last I tested this, which was a while ago. I'll report back on what I am able to come up with in the end. (probably by next week)

teovillanueva commented 1 year ago

Sure! If that doesn't seem to work we'll go with the condition solution :) Im really excited to see Draftbit use the library

YoussefHenna commented 1 year ago

And we're excited to include it as well! Will be a great addition 😁

YoussefHenna commented 1 year ago

Turns out export { Marker } from 'react-native-maps'; is sufficient to solve the issue!