Bottom tab navigator maintains independent stacks per tab

When all tabs share one stack, navigating deep into Home and then switching to Settings rewinds or contaminates Home's history — users lose the screen they were on, and tab icons stop feeling like separate surfaces. This breaks the tab metaphor that iOS and Android users expect, tanks session depth in product analytics, and forces users to re-navigate every time they glance at another tab. It is one of the most visible mobile-UX defects.

Give each Tab.Screen its own Stack.Navigator component so history is preserved per tab. Put each stack in its own file under src/navigation/:

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeList" component={HomeListScreen} />
      <Stack.Screen name="HomeDetail" component={HomeDetailScreen} />
    </Stack.Navigator>
  )
}

<Tab.Navigator>
  <Tab.Screen name="HomeTab" component={HomeStack} />
  <Tab.Screen name="SettingsTab" component={SettingsStack} />
</Tab.Navigator>