Bug

I am displaying a map in the structure I use in BottomSheet. While the map I designed in Webview works properly in "Scrollview" in normal pages, it does not move with one finger in "BottomSheetScrollView" and cannot be zoomed with two fingers.

Screenshot_1720424577

Environment info

Library	Version
@gorhom/bottom-sheet	5.0.0-alpha.10
react-native	0.74.0
react-native-reanimated	3.13.0
react-native-gesture-handler	2.17.1
react-native-webview	13.10.2

Steps To Reproduce

Create a scrollable bottomsheet from https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheetscrollview
Place a custom component as children in BottomSheet.
Wrap the render part with BottomSheetScrollView and call the map you are using as a webview inside it.
Open the bottomsheet, which we designed to be scrollable, and try scrolling the map inside with one finger and zooming in with two fingers.

Describe what you expected to happen:

We should be able to scroll the map with one finger movement.
The map should be able to zoom in or zoom out with two finger movements.

Reproducible sample code

BottomSheet.tsx

 ...
 return (
    <BottomSheet
        enableDynamicSizing={false}
        ref={sheetRef}
        index={-1}
        snapPoints={snapPoints}
        onClose={closeBottomSheetFnc}
        enablePanDownToClose={true}
        style={styles.bottomSheet}
        backdropComponent={renderBackdrop}
      >
        {props.children}
    </BottomSheet>
  );

DetailMapBottomSheet.tsx - ({props.children})

...
return (
   <BottomSheetScrollView>
        <LeafletMap
              defaultMarkerIcon="https://cdn0.iconfinder.com/data/icons/isometric-city-basic-transport/48/truck-front-01-512.png"
              defaultZoom={7}
              initialCoordinates={[lat , long]}
              markerCoordinates={[lat, long]}
              popupContentTime={``}
              popupContentAdress={``}
            />
    </BottomSheetScrollView>
);

LeafletMap.tsx

 ...
 const html = `
    <!DOCTYPE html>
    <html>
    <head>
        <title>Leaflet Map</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
        <style>
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
            #map {
                height: 100vh;
                width: 100vw;
            }
            .popup-content-container {
                max-height: 100px;
                overflow-y: auto; 
            }
            .popup-content {
                max-height: 50px; 
                overflow-y: auto; 
                padding: 0;
                margin: 0; 
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script>
            var map = L.map('map').setView([${initialCoordinates[0]}, ${
    initialCoordinates[1]
  }], ${defaultZoom});
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19
            }).addTo(map);

            var customIcon = L.icon({
                iconUrl: '${defaultIconUrl}',
                iconSize: [41, 41],
                iconAnchor: [20, 20], 
                popupAnchor: [0, -20],
                tooltipAnchor: [16, -28],
                shadowSize: [41, 41]
            });

            var centerMarker = L.marker(map.getCenter(), { icon: customIcon }).addTo(map); 
            var customPopup = L.popup({
                minWidth: 40,
                minHeight: 40,
                autoClose: false 
            }).setContent(\`
                <div class="popup-content-container">
                    <div class="popup-content">
                        <p style="text-align: center; font-weight: bold; color: grey; margin: 0;">
                            ${popupContentTime ?? "-"} 
                        </p>
                        <p style="text-align: center; font-weight: bold; color: grey; margin: 0;"> 
                            ${popupContentAdress ?? "-"}
                        </p>
                    </div>
                </div>
            \`);
        </script>
    </body>
    </html>
    `;

   return (
    <View style={styles.container}>
      <WebView
        originWhitelist={["*"]}
        source={{ html }}
        style={styles.webview}
      />
    </View>
  );

gorhom / react-native-bottom-sheet

[v5] The map I use in webview does not move or zoom. #1879

Bug

Environment info

Steps To Reproduce

Reproducible sample code