pavel-corsaghin / react-native-leaflet

A LeafletView component using WebView and Leaflet map for React Native applications
MIT License
99 stars 42 forks source link

Issue with web simulation under expo #12

Open AF-Hub opened 2 years ago

AF-Hub commented 2 years ago

Hello,

I'm trying a simple example under expo.

The leaflet shows up fine when running iOS simulation. However, when I launch the web simulation, I obtain the following error:

./node_modules/react-native-leaflet-view/lib/module/LeafletView/index.js:22:7 Module not found: Can't resolve '../../android/src/main/assets/leaflet.html' 20 | 21 | const LEAFLET_HTML_SOURCE = Platform.select({

22 | ios: require('../../android/src/main/assets/leaflet.html'), | ^ 23 | android: { uri: 'file:///android_asset/leaflet.html' }, 24 | });

The example:

import { StyleSheet, Text, View, SafeAreaView } from 'react-native'; import { LatLng, LeafletView } from 'react-native-leaflet-view';

const DEFAULT_COORDINATE: LatLng = { lat: 37.78825, lng: -122.4324, };

export default function App() { return (

); } const styles = StyleSheet.create({ root: { flex: 1, justifyContent: 'center', alignItems: 'center', }, });
silgal commented 2 years ago

I have the same issue with my react-native-web based project. My stack:

Here is my investigation so far:

When react-native-leaflet is installed, android/src/main/assets/leaflet.html is installed to node_modules/react-native-leaflet-view/android/src/main/assets/leaflet.html

While src/LeafletView/index.tsx is installed to node_modules/react-native-leaflet-view/lib/module/LeafletView/index.js

Thus src/LeafletView/index.tsx should do ✅ require('../../../android/src/main/assets/leaflet.html')

Instead of ❌ require('../../android/src/main/assets/leaflet.html')

@pavel-corsaghin Do you have an idea how to fix this? I can help send a PR.

miallo commented 2 years ago

Maybe an option for now would be to duplicate the index.html, so that expo does not do anything stupid on iOS 🤔

silgal commented 2 years ago

Maybe an option for now would be to duplicate the index.html, so that expo does not do anything stupid on iOS 🤔

To clarify, my problem happens on macbook air, see above for my stack.

rallep commented 1 year ago

Hi is there any solution or workaround to this issue?

It would be nice to be able to write an Expo app, having leaflet work on native devices and the web :-)

lichtmetzger commented 1 year ago

Found a solution here: https://github.com/pavel-corsaghin/react-native-leaflet/issues/8#issuecomment-1435787897