fix: hide the sheet container on closed

[gorhom]

Closes #665

Motivation

When the user dismiss a keyboard view on Android, the container height will resize after the keyboard is been hidden, which will make the closed bottom sheet visible for few milliseconds.

So i have added a logic to hide the bottom sheet when it is closed.

Installation

yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#fix/665-hide-sheet-when-closed

[gorhom]

@aditya-keri-betterhalf, @siddharth-kt , @aimensasi would you mind testing this PR, thanks !

[siddharth-kt]

Great, I tested it, it worked for me 👍.

[aimensasi]

@gorhom I confirm this is fixed the issue on my end. Thanks a lot

[julienripet]

Hi, sorry to be a buzzkill, but it doesn't seem to fix it for me.
I installed it using the command you gave above, yarn add ssh://git@github.com:gorhom/react-native-bottom-sheet#fix/665-hide-sheet-when-closed, but it didn't do anything.
I deleted my node_module folder, I restarted my metro server with --reset-cache, I even updated react-native-reanimated and react-native-gesture-handler to their latest versions, but nothing seems to change.

@siddharth-kt or @aimensasi, do you think you could share your package.json? Or if you have an idea of what I might be doing wrong?

I can open another Issue with my code if needed.

[aditya-keri-betterhalf]

I confirm as well that this issue is fixed on my end.

[aimensasi]

@julienripet I did not do anything special, just installed the fix and reloaded the app.

[aimensasi]

@julienripet maybe your issue is different, you could create a snack to reproduce.

[badalsaibo]

Was having this problem too. Ran npm install ssh://git@github.com:gorhom/react-native-bottom-sheet#fix/665-hide-sheet-when-closed and it seems to be fixed.

[gorhom]

thanks guys for testing!

[rchavik]

I do not understand why, but this somehow broke the web version of my App.

I added console.log({animatedIndex}) just before useAnimatedStyle() and debug console only shows 1 entry with animatedIndex.value = -1. So the opacity is 0.

I also tried to fish out the actual element via the Inspector and found the following:

Changing the opacity to 1 does show the bottom sheet again.

[DanielMarkiel]

Hi @gorhom,
I believe this fix breaks the BottomSheetModal (it's probably the same bug as @rchavik described above).
It opens only once and it doesn't want to reopen after dismissing (everything is fine at v4.1.1).
My snap points (if this is relevant):

const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], [])

[gorhom]

@rchavik could you open a new issue with a reproducible snack ?

@DanielMarkiel could you check this issue #697, it might be the one you are facing now

[Kjagd]

@gorhom I'm also facing issues regarding this. Using BottomSheetModal sometimes when it's displayed for the second time, the opacity is not not reset, so it's completely invisible. It's a bit tricky to reproduce, since it apparently depends on the how much content I have in the sheet. But if I have something a bit heavy like a calendar in it, it's very consistently happening. Perhaps #697 needs to be reopened.