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>

• ID: mobile-navigation-linking.navigation-ux.tab-stacks-independent

• Severity: medium

• What to look for: If using Tab Navigator, check whether each tab has its own Stack Navigator. Examine whether navigating in one tab doesn't affect the other tabs' navigation stacks. Check that switching tabs preserves the stack state within each tab.

• Pass criteria: Count all Tab.Screen entries and their child Stack.Navigator components. Each tab must have its own Stack Navigator. Navigating within tab A must not affect tab B's stack. Switching between tabs preserves each tab's navigation history. At least 2 independent tab stacks must exist.

• Fail criteria: All tabs share a single stack, causing navigation in one tab to affect others. Tab state is lost when switching tabs.

• Skip (N/A) when: The app does not use tab navigation (0 Tab.Navigator instances found).

• Detail on fail: "All tabs share the same navigation stack — navigating in the Home tab also changes what's displayed in Settings" or "Switching tabs resets navigation state"

• Remediation: Each tab should have its own Stack Navigator:

  function HomeStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="HomeList" component={HomeListScreen} />
        <Stack.Screen name="HomeDetail" component={HomeDetailScreen} />
      </Stack.Navigator>
    )
  }
  
  function SettingsStack() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="SettingsMain" component={SettingsScreen} />
        <Stack.Screen name="SettingsDetail" component={SettingsDetailScreen} />
      </Stack.Navigator>
    )
  }
  
  function RootTabs() {
    return (
      <Tab.Navigator>
        <Tab.Screen name="HomeTab" component={HomeStack} />
        <Tab.Screen name="SettingsTab" component={SettingsStack} />
      </Tab.Navigator>
    )
  }