I’m encountering an issue in my React Native application where a full-screen modal is being obscured by a bottom sheet. I’m using Expo Router for navigation and @gorhom/bottom-sheet for modal and bottom sheet functionality. Despite trying various approaches, the bottom sheet consistently appears above the modal, making it difficult for users to interact with. How can I ensure that the full-screen modal always appears on top of the bottom sheet?

I attempted adjusting the z-index of the modal to ensure it appears above the bottom sheet. However, this approach didn’t yield the desired result. I expected that by increasing the z-index of the modal, it would be rendered above the bottom sheet, allowing users to interact with it without obstruction.