Create a <Drawer> Layout with nested <Stack>

[Emperor-Koala]

I'm trying to make a <Drawer> layout, where one of the routes has a nested <Stack>. The main issue I'm encountering is a sort of "conflict" with the headers. I want the root page of the <Stack> to include the "open drawer" button in the header, but for any sub-pages of the Stack to just have a back button.

Unfortunately right now if I want to be able to go back up through the stack, I have to show the headers for both navigators, which obviously doesn't look that great.

I tried defining the options on both <Drawer.Screen /> and <Stack.Screen /> at the same time, but it just merged them and applied all the options to the Stack navigator. I also thought about using navigation.openDrawer(), but typescript complains because openDrawer() doesn't exist on the base useNavigation().

Has anyone managed to figure out how to accomplish something like this? Any help would be greatly appreciated!

[wcastand]

hope this helps
https://github.com/wcastand/example-drawer

[Emperor-Koala]

Unfortunately, I ended up starting on my current project about a month and a half too early. I'm using Expo SDK 48 and Expo Router v1.

[NaumanJafarSintov]

@Emperor-Koala did you find a solution to this problem, I am facing the same problem

[NaumanJafarSintov]

@Emperor-Koala this issue has the simplest solution, just make the headerShown false for your specific screen inside your drawer and use DrawerToggleButton from react-native/drawer

import { DrawerToggleButton } from "@react-navigation/drawer";
import { Stack } from "expo-router";

export default function StackLayout(){
return
<Stack.Screen name = "packagesScreen" options={{
headerLeft: () =>
}}/>
<Stack.Screen name = "deliveryDetailsScreen"/>

}