How to Make a Bottom Sheet Modal Appear on Top of Expo Tabs

[ghost]

Can someone help me? Is there a way to make the bottom sheet modal appear on top of the tabs? I'm using Expo Router/Tab navigation.

[GaylordP]

Hello :)

Have you found a solution?
Thanks

[GerardGargan]

I had this issue and moving the BottomSheet component higher up the component tree worked. In the end I moved it into my _layout file where the tab navigation stack was defined (I'm using expo router). It then rendered over the top. Hope this helps someone in the future

[Dosbodoke]

@GerardGargan How can I open it from a deeply nested component?

[GerardGargan]

@GerardGargan How can I open it from a deeply nested component?

Hi, I ended up swapping to use the BottomSheetModal component that is provided by the library for this purpose. You can nest it deeply in components and it will still render on top, I'm guessing it uses a portal, like a normal Modal would to do this.

[timohuennebeck]

I had the same issue, but using @gorhom/portal solved it for me. You can wrap a Portal around the components you want to display “on top” of the tab, and that worked perfectly for me.

Though, it's worth nothing that for the bottom sheet itself I also use @gorhom/bottom-sheets.

[poy004id]

I can do that by using the Portal from React Native Paper to wrap the BottomSheet. However, it might be better to use a dedicated portal library, since using React Native Paper just for the portal could be unnecessarily heavy.