[Bug]: Scrolling with ScrollView not possible (MapBox intercepts the interactions)

[jhemmje]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.74.5

Platform

iOS, Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React, { useState } from "react";
import { Button, Text, Image, ScrollView, View } from "react-native";
import Mapbox from "@rnmapbox/maps";
// import markerGold from "./marker-gold.png";

Mapbox.setAccessToken("...");

export default function Map() {
  const [followUserLocation, setFollowUserLocation] = useState(false);
  const [selectedFeature, setSelectedFeature] = useState();
  const [bounds, setBounds] = useState({ ne: [0, 0], sw: [0, 0] });

  const featureCollection = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        id: "1",
        properties: {
          icon: "example",
          description:
            "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
        },
        geometry: { type: "Point", coordinates: [10, 50] },
      },
    ],
  };

  /** Close Popup if open, open popup on marker press. */
  const onMarkerPress = (e) => {
    if (selectedFeature) {
      setSelectedFeature(undefined);
      return;
    }

    const feature = e?.features[0];
    setSelectedFeature(feature);
  };

  /** Update map bounds after moving the viewport. */
  const onMapIdle = (regionFeature) => {
    setBounds(regionFeature.properties.bounds);
  };

  return (
    <View style={{ flex: 1, height: "100%", width: "100%" }}>
      <Mapbox.MapView
        style={{ alignSelf: "stretch", flex: 1 }}
        logoEnabled={true}
        compassEnabled={true}
        compassViewPosition={1}
        onMapIdle={onMapIdle}
        onPress={onMarkerPress}
      >
        <Mapbox.Camera
          zoomLevel={0}
          followUserLocation={followUserLocation}
          followZoomLevel={14}
          followUserMode="normal"
        />
        <Mapbox.UserLocation showsUserHeadingIndicator={true} animated={true} />

        // <Mapbox.Images images={{ markerGold }} />

        <Mapbox.ShapeSource
          id="mapMarkersSource"
          shape={featureCollection}
          onPress={onMarkerPress}
        >
          <Mapbox.SymbolLayer
            id="mapMarkersLayer"
            style={{
              iconAllowOverlap: true,
              iconAnchor: "bottom",
              iconImage: "markerGold",
              iconSize: 0.5,
            }}
          />
        </Mapbox.ShapeSource>

        {selectedFeature && (
          <Mapbox.MarkerView coordinate={selectedFeature.geometry.coordinates}>
            <ScrollView
              style={{
                backgroundColor: "white",
                display: "flex",
                flex: 1,
                maxHeight: 200,
                maxWidth: 200,
                padding: 10,
              }}
            >
              <Text style={{ fontSize: 14 }}>
                {selectedFeature.properties.description}
              </Text>
            </ScrollView>
          </Mapbox.MarkerView>
        )}
      </Mapbox.MapView>
    </View>
  );
}

Observed behavior and steps to reproduce

MapBox intercepts the interaction and the scrolling of the ScrollView does not work.

Bildschirmaufnahme.2024-11-19.um.17.05.55.mov

Expected behavior

MapBox does not intercept the interactions and the scrolling of the ScrollView works.

Notes / preliminary analysis

No response

Additional links and references

No response

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

error: Comments inside children section of tag should be placed inside braces (react/jsx-no-comment-textnodes) at example.jsx:62:81:
  60 |           followUserMode="normal"
  61 |         />
> 62 |         <Mapbox.UserLocation showsUserHeadingIndicator={true} animated={true} />
     |                                                                                 ^
  63 | 
  64 |         // <Mapbox.Images images={{ markerGold }} />
  65 | 


error: 'markerGold' is not defined (no-undef) at example.jsx:64:37:
  62 |         <Mapbox.UserLocation showsUserHeadingIndicator={true} animated={true} />
  63 | 
> 64 |         // <Mapbox.Images images={{ markerGold }} />
     |                                     ^
  65 | 
  66 |         <Mapbox.ShapeSource
  67 |           id="mapMarkersSource"


2 errors found.```