I was using leaflet for my project but the map screen is appearing blank…

”'<WebView
originWhitelist={[‘*’]}
source={{ html: `

Leaflet Map

#map { height: 100%; width: 100%; }
.leaflet-container { height: 100vh; width: 100vw; max-width: 100%; max-height: 100%; }

document.addEventListener(“DOMContentLoaded”, function() {
console.log(“Map content loaded”);
try {
var map = L.map(‘map’).setView([19.119, 72.847], 13);
console.log(“Map initialized”);

              L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
              }).addTo(map);

              console.log("Tile layer added");
            } catch (error) {
              console.error('Error initializing map:', error);
            }
          });
        </script>
      </body>
      </html>
    ` }}
    style={styles.map}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    onMessage={(event) => {
      console.log(event.nativeEvent.data);
    }}
  />'''