[v4] Entire view being blocked by BottomSheetBackdrop

[Prabindas001]

Bug

The first time it works as expected, but once I move to some other screen and come back, all touch events are blocked by the backdrop overlay. Though, the backdrop component is not visible at that time.

The same app is tested on Android and iOS, but the issue is only present on the Android device.

Environment info

Library	Version
@gorhom/bottom-sheet	4
react-native	expo: sdk-42.0.0
react-native-reanimated	2.2.0
react-native-gesture-handler	1.10.2

Device Details:

OS: Android 11 (MIUI Global 12.5.8 Stable) Model: Redmi Note 10 Pro (M2101K6P)

Steps To Reproduce

1. Open the bottom sheet and close it
2. Change to some other using stack navigator
3. Come back to this page, touch events should be blocked.

Reproducible sample code

Its all from example code, still I'm adding the code here:

  const bottomSheetRef = useRef();
  const snapPoints = useMemo(() => ["80%"], []);

  const renderBackdrop = useCallback(
    (props) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        enableTouchThrough={true}
      />
    ),
    []
  );

  return (
  <KeyboardAvoidingView
      style={styles.groceriesParentView}
      behavior={Platform.OS === "ios" ? "padding" : null}>
      <SafeAreaView style={styles.container}>

        <BottomSheet
          ref={bottomSheetRef}
          index={-1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
          enablePanDownToClose={true}
          backdropComponent={renderBackdrop}>
             <View>...<View/>
        </BottomSheet>

      </SafeAreaView>
    </KeyboardAvoidingView>
)

[nyoung697]

Are you seeing this log show up on your device by any chance?

Could not locate shadow view with tag #1065, this is probably caused by a temporary inconsistency between native views and shadow views.

I am experiencing a similar issue to yours I think. It is happening on iOS though. It seems to be working okay on Android.

It is inconsistent with when it happens though. However, when it does occur, I get that message printed out in the device logs.

It will happen after presenting the bottom sheet a few times and dismissing it. Then when I go to present the sheet again, the backdrop will show up initially, without any sheet. I can dismiss it by clicking outside the boundary of where the sheet should have appeared. Then some of the touch events below where the sheet should have appeared are blocked. So it's as if the sheet is there, but I can't see it.

[akshy78695]

Facing same issue, It could be solved by changing Touchables,

import { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from 'react-native';

To:

import { TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, } from '@gorhom/bottom-sheet'; From docs.

But I couldn't use them because they don't work exactly as touchables from react-native and need more customization to work as before. and I don't want to customize every touchable in the app. (By the way, If touchable wasn't the issue this is the perfect bottomsheet library for me.)

[rauchp]

Using the Custom Backdrop example (https://gorhom.github.io/react-native-bottom-sheet/custom-backdrop) I saw the same problem.

I fixed it by adding pointerEvents="none" to the Animated.View in the example.

E.g return <Animated.View pointerEvents="none" style={containerStyle} />;

Does this fix it for you? @Prabindas001

[farsadf]

For those who are still struggling with this issue. As a temporary fix, it's possible to introduce a flag and hide the backdrop component by returning null from the render function before the first opening.

The following workaround fixes the issue in Android devices with higher SDK versions, that utilize the animatedSnapPoints value from the useBottomSheetDynamicSnapPoints hook.

const [hasExpandedAtLeastOnce, setHasExpandedAtLeastOnce] = useState(false);

const expand = useCallback(() => {
    if (!bottomSheetRef.current) return;

    bottomSheetRef.current.expand();
    setHasExpandedAtLeastOnce(true);
}, [bottomSheetRef.current]);

const renderBackdrop = useCallback((props: BottomSheetDefaultBackdropProps) => {
    if (!hasExpandedAtLeastOnce)
        return null;

    return <BottomSheetBackdrop disappearsOnIndex={-1} appearsOnIndex={0} {...props} />;
}, [hasExpandedAtLeastOnce]);

Then add this to your BottomSheet component:

backdropComponent={renderBackdrop}

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[kamlesh1000]

Using the Custom Backdrop example (https://gorhom.github.io/react-native-bottom-sheet/custom-backdrop) I saw the same problem.

I fixed it by adding pointerEvents="none" to the Animated.View in the example.

E.g return <Animated.View pointerEvents="none" style={containerStyle} />;

Does this fix it for you? @Prabindas001

This fixed the issue. Thanks.

[Rc85]

Using the Custom Backdrop example (https://gorhom.github.io/react-native-bottom-sheet/custom-backdrop) I saw the same problem.

I fixed it by adding pointerEvents="none" to the Animated.View in the example.

E.g return <Animated.View pointerEvents="none" style={containerStyle} />;

Does this fix it for you? @Prabindas001

This removes the capability to close the bottom sheet by pressing backdrop. It also introduces a "clickthrough" experience on the backdrop. In other words, pressing anywhere on the backdrop will interact with elements underneath it.

The question is, what is the real cause of the backdrop blocking interactions with the view?

[alexpchin]

I don't think this actually resolves the problem. Using a different backdrop is a bit of a workaround not, solving the issue with enableTouchThrough not enabling BottomSheetBackdrop to receive pointer events..