Is it possible to embed a Stack Navigator inside a TrueSheet?

[ugoi]

Hi! 👋

I'm exploring TrueSheet for my app and wondering if it's possible to embed a React Navigation Stack Navigator inside a single TrueSheet bottom sheet.

The use case: I want users to navigate between multiple screens within the same sheet — with the standard push/pop slide animation (swipe from right to left to go forward, back button to go back) — all without leaving the bottom sheet.

For example:

1. User opens a bottom sheet showing Screen A
2. User taps something → slides to Screen B (still inside the same sheet)
3. User taps back → slides back to Screen A

I know this pattern works natively on iOS by embedding a UINavigationController inside a UISheetPresentationController, and libraries like @gorhom/bottom-sheet explicitly support this.

Is this currently possible with TrueSheet? Or is the Sheet Navigator designed only for presenting screens as sheets rather than navigating within a sheet?

Thanks!

[lodev09]

Yeah, not supported yet. Haven't tried. You can play around with it, try rendering react-navigation/native within a sheet.

[ugoi]

Alright, and is it possible to navigate from a bottom sheet to a normal stack page? Because when I try to navigate to my normal stack navigator page from a bottom sheet, It kind of opens the page inside another bottom sheet but I don't want this. I want the new page to slide in from the right to the left and be like full screen and not inside the bottom sheet.

[lodev09]

try the JS based navigation instead. I think /native handle its own presentation that's why it opens another sheet/modal

[ugoi]

But does JS based navigation have any disadvantages because it's not native?

[lodev09]

Shouldn't be that bad if you just want simple push animation. Doing this in native would require a whole new setup. I was thinking about this but honestly would be best if react-navigation / react-native-screens does it on their end with their formSheet.

But maybe in the future, I'll be able to implement this.

[maxRN]

Hi @ugoi have you had any luck with putting a native stack navigator inside a TrueSheet?

[ugoi]

No unfortunately I didn't find a way. And you?

[simondaigre]

I'm also interested by this. I'd like to replace expo-router's formSheet with True Sheet, especially for detached and anchor props, while keeping navigation urls.

I tried this : https://sheet.lodev09.com/guides/navigation but it doesn't really work. There is no anchor on the "main" page (like showing the map behind the modal).

[blixky]

I needed to do exactly this and have implemented it but i have issues. I put a NavigationIndepenentTree > NavigationContainer > Stack.Navigator where Stack = createNativeStackNavigator from 'react-navigation/native-stack'. This works exactly how id like but there are some bugs im running into. If you suspend/background the app and come back to it while the sheet is open, after some time all components within the sheet will stop working (native text inputs, Stack.Screen header buttons, switches, Pressable, etc.) but the sheet can be moved up or down. My best guess is that on re-renders or after background suspension the gesture controller or the state from the IndependentTree gets lost and all components within the sheet break until the sheet can be dismissed. So yes it's easy to do with NavigationIndependentTree but it WILL break and everything and become unresponsive.