What is React Navigation nested navigators?

Nested navigators combine multiple navigators together — for example, a Tab navigator where each tab contains its own Stack navigator. This is the standard pattern for most production apps. Common pattern — Tabs with Stacks: const HomeStack = createNativeStackNavigator(); function HomeStackNavigator() { return ( <HomeStack.Navigator> <HomeStack.Screen name="HomeMain" component={HomeScreen} /> <HomeStack.Screen name="ProductDetail" component={ProductDetailScreen} /> </HomeStack.Navigator> ); } const Tab = createBottomTabNavigator(); function TabNavigator() { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeStackNavigator} /> <Tab.Screen name="Search" component={SearchScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> ); } // Top level: Stack (auth gate) → Tabs → individual stacks const RootStack = createNativeStackNavigator(); function RootNavigator() { return ( <RootStack.Navigator> <RootStack.Screen name="Auth" component={AuthNavigator} /> <RootStack.Screen name="Main" component={TabNavigator} /> </RootStack.Navigator> ); }. Navigating to nested screen: navigation.navigate("Home", { screen: "ProductDetail", params: { id: 123 } });. Tab bar visibility: to hide the tab bar on certain screens, keep those screens in a Stack navigator outside the Tab navigator, not inside a Tab's Stack. Drawer + Tabs: common pattern for apps with side drawer and tab navigation.