Navigation stack hierarchy is logically organized

A flat or tangled navigator hierarchy breaks the mental model users have of mobile apps: tabs that don't own their own stack lose history when switched, modals that sit inside a regular stack trap the user behind a back button that dismisses the wrong screen, and competing root navigators fight over linking. The result is jank that iOS and Android HIG reviewers catch, and that users describe as "the app feels weird."

Restructure navigators so one root (Tab or Stack) contains nested child stacks per tab, with modals layered above via a separate group. Put this shape in src/navigation/RootNavigator.tsx:

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

Each tab component returns its own Stack.Navigator, and modal screens live in a RootStack.Group with presentation: 'modal'.

• ID: mobile-navigation-linking.navigation-structure.stack-hierarchy

• Severity: high

• What to look for: Check the structure of your navigators. Examine Tab navigators, Stack navigators, and Drawer navigators. The hierarchy should have a root navigator (typically Tab or Stack) and nested navigators within tabs or stack screens. Check for multiple root navigators or confusing nesting.

• Pass criteria: Count all navigator components (Stack.Navigator, Tab.Navigator, Drawer.Navigator) in the codebase. Navigation follows a clear hierarchy with exactly 1 root navigator containing child navigators or screens. Tab navigators contain their own stacks if there is hierarchical navigation within each tab. Modal stacks are layered above root navigation. At least 2 navigator levels must exist for non-trivial apps.

• Fail criteria: Navigation lacks clear hierarchy, with multiple root-level navigators competing. Nested stacks are misconfigured or cannot be navigated. Modal stacks are not layered correctly.

• Skip (N/A) when: Never — all navigation must have clear hierarchy.

• Detail on fail: Describe the structural issue. Example: "Two separate NavigationContainers exist instead of a single root with nested navigators" or "Modal stack is not properly layered above root navigation"

• Remediation: Organize your navigation with a clear hierarchy. For a Tab-based app with nested stacks:

  <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeStackNavigator} />
      <Tab.Screen name="SettingsTab" component={SettingsStackNavigator} />
    </Tab.Navigator>
  </NavigationContainer>
  
  function HomeStackNavigator() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    )
  }