How do you organize nested app routes, such as combining Bottom Tabs and a Stack?

Short answer

Make the Tab Navigator a child screen inside the Root Stack Navigator, so detail screens can open full-screen above the bottom tab bar.

Explanation

A common, professional structure puts full-screen pages (such as product details, checkout, and modals) in the Root Stack and main tabbed pages in a separate BottomTabNavigator. This lets the Bottom Tab bar disappear smoothly when navigating to checkout or deeper settings screens.

Code example

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

function RootNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="MainTabs" component={HomeTabs} options={{ headerShown: false }} />
      <Stack.Screen name="Checkout" component={CheckoutScreen} />
    </Stack.Navigator>
  );
}

Common mistakes

• Wrapping a separate Root Stack inside each Bottom Tab, duplicating stacks, consuming excessive memory, and leaving the tab bar visible over checkout screens.

Follow-up questions

• What is the key difference between Native Stack Navigator and Stack Navigator in React Navigation?
• What strategies improve memory use and prevent screens from accumulating in the Navigation Stack (memory pressure)?

Sources

• React Navigation docs — Nesting navigators