Nothing works on the screen on some android devices if I will try to use this component.

Bug

Hi, I use BottomSheetBackdrop component and on some devices when the screen is mounted, no button works on that screen, it feels like something is overlayed on top of that. This bug only exists on android’s some devices.
For example, it doesn’t work: on Huawei mate 8 version 7.0, Nokia 2.1 version 10, Samsung galaxy s10 version 10, techno camon 15 version 10.

On the other hand, I tested it on my phones: Meizu note 5 version 7.0, Google pixel 3 version 10 and everything works perfectly( as I said even IOS doesn’t have such a problem ).

Thanks.

Environment info

Library	Version
@gorhom/bottom-sheet	^3.6.6
react-native	0.64.1
react-native-reanimated	^2.2.0
react-native-gesture-handler	^1.10.3

Steps To Reproduce

1. Run codes
2. Try to touch anything on the screen when you use this library

Describe what you expected to happen:

1. screen should be clickable.

Reproducible sample code

function ScreenComponent() {
  const bottomSheetRef = useRef<BottomSheet>(null);
  const [isInsightActive, setIsInsightActive] = useState(true);

  const { bottom } = useSafeAreaInsets();

  const onIsItHelpfulPress = useCallback(() => {
    bottomSheetRef.current?.expand();
  }, []);

  return (
    <Screen stretch>
      <Header withTitle />
      <Row justifySpaceBetween alignCenter px={7} mt={7}>
        <Touchable active={isInsightActive} onPress={onIsItHelpfulPress}>
          <Text fontSize={4} fontWeight={3}>
            Insights
          </Text>
        </Touchable>
      </Row>

      <BottomSheet
        ref={bottomSheetRef}
        index={-1}
        snapPoints={[0, 200]}
        backdropComponent={BottomSheetBackdrop}
      >
        <Column mt={7} stretch paddingBottom={`${bottom}px`}>
          <Text fontSize={5} fontWeight={3} px={7}>
            Is this helpful?
          </Text>
        </Column>
      </BottomSheet>
    </Screen>
  );
}

[Evan-Younan]

It looks like I encountered this issue on 4.0.3. This will happen on some Android devices but not others. The Samsung S10 reproduces this bug 100% of the time for example. Code looks like so:

 <BottomSheet
    ref={bottomModalSheetRef}
    index={-1}
    animationConfigs={animationConfigs}
    snapPoints={["55%"]}
    detached={false}
    enablePanDownToClose={true}
    enableContentPanningGesture={true}
    overDragResistanceFactor={4}
    topInset={insets.top}
    backdropComponent={(bdProps) => (
      <BottomSheetBackdrop
          {...bdProps}
          appearsOnIndex={0}
          disappearsOnIndex={-1}
          opacity={0.4}
          enableTouchThrough
      />
    )}
    backgroundStyle={{ backgroundColor: "white" }}
>
  <BottomSheetView style={styles.container}>
    <SortPickerContent
       setSortType={setSortType}
       sortType={sortType}
       handleBottomSheetClose={handleBottomSheetClose}
    />
  </BottomSheetView>
</BottomSheet>


...


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.white,
  },
});

edit: After some more digging, a lot of the issues are happening with Android 10 devices.

[fifi98]

I’m having the same issue with the latest 4.1.0 version when using dynamic snap points. It works perfectly fine without dynamic snap points.