Best Approach for Navigating Within Tab Navigator with Stacks

[premdasvm]

Hello,

I'm working on setting up a TabNavigator, and I'm looking for the best approach to handle navigation within each tab. Specifically, I have different modules like Attendance and Leave, and I'd like to create separate stacks (AttendanceStack and LeaveStack) to manage the screens within each module.

My initial attempt was to add these stacks directly to the RootNavigator, but I encountered issues when trying to navigate from the Home screen which is inside the TabNavigator.

const tabs: TabType[] = [
	{
		name: "Home",
		component: Home,
		label: "Home",
		header: false,
	},
	{
		name: "AttendanceNavigator",
		component: AttendanceNavigator,
		label: "Attendance",
	},
	{
		name: "Settings",
		component: Settings,
		label: "Settings",
	},
];

how to handle this situation, based on your best practices? Should i create a HomeStack and put all nested stacks under it? and just pass HomeStack to the TabNavigator ?

[yjose]

The best approach for me is to create the tab navigator as a screen inside the root stack screen, and then add all other screens to the root stack. This way, it's easy to navigate and makes your app simple and easy to maintain. I always find it challenging to use nested routes.