[v4] | [v2] Modal not dismissing

[louie-pangan]

Bug

We are using multiple modals (open at the same time) in our project.
There are instances when closing the modal either tapping outside of the modal or calling dismiss from useBottomSheetModal hook, useAnimatedReaction hook callback is invoke multiple times. This will then invoke _providedOnClose -> handleUnmountSheet of BottomSheetModalProvider.

react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx

Line 1582 in 2b37e06

runOnJS(_providedOnClose)();

Given that handleUnmountSheet of BottomSheetModalProvider will be invoke multiple times using the same key, sheetsQueueRef will be updated depending on the number of calls which may result on an empty array.
If possible to have a guard in handleUnmountSheet that if sheetIndex is -1, succeeding codes will not be executed.

react-native-bottom-sheet/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx

Line 89 in 2b37e06

_sheetsQueue.splice(sheetIndex, 1);

The problem now is we only expected to remove only the top most modal in sheetsQueueRef but since unmount is called multiple times even the other modals were removed.
Even if we call dismissAll from useBottomSheetModal, the modal is still not closing.

Environment info

Library	Version
@gorhom/bottom-sheet	4.4.5
react-native	0.72.10
react-native-reanimated	~3.3.0
react-native-gesture-handler	~2.12.0

Steps To Reproduce

1. Implement a screen with two or more modal - the first modal occupying the whole screen with a cancel button to dismiss all modals and the succeeding modals half of the screen (when opened)
2. Open the first modal
3. Open another modal
4. Close the last modal
5. Repeat steps 3 and 4 multiple times
6. Tap cancel

Expected Behavior:
The first modal should be closed

Actual Behavior:
The first modal is not closing

Reproducible sample code

[janodetzel]

Same issue

[gaberogan]

Same issue, it's causing users to complain about "freezing" and needing to force close the app

[entryxbad]

Is there any solution to this problem?

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[louie-pangan]

Hi,
Would it be okay to have a checking if the key is not existing in sheetsQueue then just return?
So it will not unmount the incorrect sheet.
https://github.com/gorhom/react-native-bottom-sheet/blob/2b37e067aa027f408b32d50cc2636d4093bcacfc/src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx#L89C5-L89C40