Cant click whats under the bottom sheet when adding backdrop

Bug

When I add a back drop component to the bottom sheet, I canot click on anything bellow the bottom sheet, even when backdrop is closed. Tryed to add enableTouchThrough={true} to backdrop but it didnt help.

Environment info

| @gorhom/bottom-sheet | ^2.2.4 | | react-native | 0.63.4 | | react-native-reanimated | ^1.13.2 | | react-native-gesture-handler | ^1.9.0 |

Steps To Reproduce

1. Create a screen with a button.
2. Add bottom sheet and have 2 snap points, one on 20% and one on 70% (never on 0).
3. Add backdrop comopnent to be presented only when the bottom sheet is on 70%.
4. Try to click the button, when to bottom sheet is on 20% (the first snap point).

Describe what you expected to happen:

1. The button should be clicked.

what happend:

1. the button is not clicked.

Reproducible sample code

import React, { useRef } from 'react';
import styled from 'styled-components/native';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetBackgroundProps,
} from '@gorhom/bottom-sheet';
import { View } from 'react-native';

const StyledBackdrop = (props: BottomSheetBackdropProps) => {
  return (
    <BottomSheetBackdrop
      {...props}
      closeOnPress={false}
      enableTouchThrough={true}
    />
  );
};

const snapDrawerPoints = [168, 470];

export const BottomDrawer = ({ children }: { children?: React.ReactNode }) => {
  const bottomSheetRef = useRef<BottomSheet>(null);

  return (
    <BottomSheet
      ref={bottomSheetRef}
      backdropComponent={StyledBackdrop}
      snapPoints={snapDrawerPoints}>
        <Container>{children}</Container>
    </BottomSheet>
  );
};

const Container = styled.View`
  flex: 1;
  margin: 20px 20px 0 20px;
`;

Edit

Found out it works fine for some devices and doesnt work for others. Works fine on pixel 4 for example, and doesnt work for oneplus 8 and galaxy note 20 ultra. Wasnt tested on iPhone.

[mulholland-cc]

@AmirDebbie @oneji @ShaunLWM

I had the same issue on the iPhone. Adding pointerEvents='none' to the Animated.View in the example solved this for me.

const Backdrop = ({ animatedIndex, style }: BottomSheetBackdropProps) => {
  // animated variables
  const containerAnimatedStyle = useAnimatedStyle(() => ({
    opacity: interpolate(
      animatedIndex.value,
      [0, 1],
      [0, 1],
      Extrapolate.CLAMP
    ),
  }));

  // styles
  const containerStyle = useMemo(
    () => [
      style,
      {
        backgroundColor: colors.pulp,
      },
      containerAnimatedStyle,
    ],
    [style, containerAnimatedStyle]
  );

  return <Animated.View pointerEvents='none' style={containerStyle} />;
};

export default Backdrop;

Hope this helps.

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