How to navigate to another screen while leaving the sheet open without overlaping?

[rodolphoasb]

Hey, first of all, I want to say thanks to all the maintainers of this awesome project!

I have a component that's using BottomSheetModal.

Imagine apps like Instagram or Tiktok, where you can open comments and navigate to a profile. When you click to navigate back to the comments, the bottom sheet is still open and in the same position it was before.

With my current implementation using BottomSheetModal, when I navigate to the profile, the sheet and the backdropComponent remain open and in front of the profile content, while they should be behind it. I tried adjusting this with z-index and closing > opening the modal, but none of these solutions seems ideal.

How can I make this work with react-navigation and react-native-bottom-sheet? Has anyone already implemented this?

[SMhdAsadi]

I think you need to use the normal BottomSheet component. The modal version goes above your screen hierarchy while the normal one is part of the screen hierarchy. The normal one remains in the same screen even if you navigate to other screens. Did you try this solution?