[v3] BottomSheetScrollView and BottomSheetBackdrop blocking the entire app content

[ferrannp]

Bug

When mounting the sheet, it seems that the BottomSheetBackdrop is capturing your clicks and you cannot interact with the app.

It seems to happen only on iOS.

Environment info

Library	Version
@gorhom/bottom-sheet	3.2.1
react-native	0.63.4
react-native-reanimated	2.0.0-rc.2
react-native-gesture-handler	1.9.0

Steps To Reproduce

Clone https://github.com/ferrannp/bottom-sheet-playground.

1. Click Open button to open the sheet
2. If it works, refresh JS and try again (does not work 90% of the times)

Describe what you expected to happen:

1. To not block the app content

Reproducible sample code

https://github.com/ferrannp/bottom-sheet-playground

[gorhom]

thanks @ferrannp for submitting this issue, will investigate it tomorrow 👍

[hoangtrung99]

@gorhom I have an error with BottomSheetBackdrop, BottomSheetBackdrop not visible when set dismissOnPanDown={true} in BottomSheetModal :/

[ferrannp]

@gorhom let me know if you want me to try something for this one. Happy to help.

[gorhom]

yes please,, you could try to replace the Touchable component with TapGestureHandler in the BottomSheetBackdrop and see if it fix the issue :)

[ferrannp]

@gorhom: Mmm it seems that changing:

<AnimatedTouchableWithoutFeedback
  onPress={handleOnPress}
  ...
>

to

<TapGestureHandler
  onHandlerStateChange={handleOnPress}
  ...

Makes it work. However, the backdrop flashes remains in v3.

[gorhom]

@ferrannp would please test #246 :)

could you create a separate issue and i'll pick it right away 👍

[ferrannp]

Here you go @gorhom #250. Same repo with some tweaks.

[phuoc-insignia]

@gorhom I have an error with BottomSheetBackdrop, BottomSheetBackdrop not visible when set dismissOnPanDown={true} in BottomSheetModal :/

try to set disappearsOnIndex={-1} on your <BottomSheetBackdrop /> component

[hoangtrung99]

@gorhom I have an error with BottomSheetBackdrop, BottomSheetBackdrop not visible when set dismissOnPanDown={true} in BottomSheetModal :/

try to set disappearsOnIndex={-1} on your <BottomSheetBackdrop /> component

Yes, it works, i did it before 👍