[v4] | [v2] Mapbox MapView is overflowing to backdropComponent when scrolling.

[nabilseid]

Bug

BottomSheetScrollView fails to hide Mapbox on backdrop area when scrolling. It hides other elements but Mapview is still visible. I tried z-index, setting overflow to hidden. Nothing worked. The issue is happening on android. I haven't tested it in iOS.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.4
react-native	0.74.2
react-native-reanimated	3.10.1
react-native-gesture-handler	2.16.1

Reproducible sample code

const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        {...props}
        pressBehavior="collapse"
      />
    ),
    []
  );

const renderMap = useCallback(
    (mapData, index) => (
      <MapCard key={index} mapData={mapData} />
    ),
    []
 );

return (
    <>
      {/* Floating Button */}
      <Animated.View style={[animatedCloseWrapper]}>
        {props.floatingHeader && props.floatingHeader()}
      </Animated.View>

      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        index={1}
        backdropComponent={renderBackdrop}
        enablePanDownToClose={false}
        animatedPosition={bottomSheetPosition}
      >
        <BottomSheetScrollView style={{ padding: 15 }}>
          {data && data.map(renderMap)}
        </BottomSheetScrollView>
      </BottomSheet>
    </>
  );

BottomSheetScrollView seems to work fine without MapBox.

[github-actions[bot]]

@nabilseid: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.