How do I make the BottomSheetModal show above the native Modal

[EliusHHimel]

I need to use the BottomSheetModal inside the native Modal from React Native. Currently when I do this, the BottomSheetModal shows behind the Native modal and isn’t intractable. How do I bring this to front.

[draxx318]

I'm also trying to figure this out, but in my case, I want it to overlay my custom bottom navigation, which is positioned absolutely.

[gorbypark]

I need to use the BottomSheetModal inside the native Modal from React Native. Currently when I do this, the BottomSheetModal shows behind the Native modal and isn’t intractable. How do I bring this to front.

Try adding another inside of your modal, so something Like ... . I think in theory bottom sheet modal is looking for the first modal provider so you won't get two modals opening.

[ken-lullaboo]

I was having the same scenario, it work after I wrap my native Modal with BottomSheetModalProvider. Hope this help.

[kristian-nst]

Putting it inside a Modal doesn't work for me :/

[EliusHHimel]

They pushed a fix in the latest versions, so try updating the package, and it should work.

[kristian-nst]

im already on latest :)

[VaheSaroyan]

This is a common issue with @gorhom/bottom-sheet. The BottomSheetModal renders in a portal, but native Modal creates its own native view hierarchy that sits above everything.

Use BottomSheetModalProvider inside the Modal Wrap content inside your Modal with its own provider:

import { Modal } from 'react-native'; import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'; <Modal visible={isVisible}> <BottomSheetModalProvider> {/* Your modal content */} <BottomSheetModal ref={bottomSheetRef}> {/* Bottom sheet content */} </BottomSheetModal> </BottomSheetModalProvider> </Modal>

[EliusHHimel]

When I posted this problem, I was already using the BottomSheetModalProvider, but it was still showing behind the native modal.