[v4] Entire view being blocked by BottomSheetBackdrop

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>
)

[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}