Skip to main content

Navigation history maintains correct screen order

ab-001866 · mobile-navigation-linking.navigation-ux.navigation-history
Severity: lowactive

Why it matters

Calling navigation.reset() or popToTop() outside of logout, onboarding, or deep-link landing flows silently erases the user's breadcrumb trail. The back button then jumps past screens the user expects to return to, breaking the fundamental mobile contract that back equals undo. Users blame the app for "losing their place," and funnels that depend on multi-step flows (checkout, signup) report inflated drop-off because the stack is being rebuilt underneath them.

Severity rationale

Low because history corruption is usually recoverable and impacts navigation feel rather than core functionality.

Remediation

Prefer navigation.navigate() and navigation.push() for forward motion and let React Navigation maintain history automatically. Reserve reset() for intentional stack wipes — auth boundaries, post-onboarding, deep-link landing. In src/screens/LogoutScreen.tsx:

useEffect(() => {
  navigation.reset({ index: 0, routes: [{ name: 'Login' }] })
}, [])

Grep the repo for navigation.reset and confirm each call is tied to a flow boundary, not a routine transition.

Detection

  • ID: mobile-navigation-linking.navigation-ux.navigation-history

  • Severity: low

  • What to look for: Examine the navigation history behavior. Test navigating through multiple screens and using the back button. Verify that the stack maintains screens in the correct order — back button doesn't jump to unexpected screens, and the history is preserved correctly.

  • Pass criteria: Count all navigation.reset() and navigation.popToTop() calls. Navigation history must be maintained in correct order. Back button pops screens 1 at a time in the expected sequence. No more than 0 unintentional reset calls should exist outside of logout/onboarding flows. Navigation state correctly reflects the app's current position in the navigation tree.

  • Fail criteria: Back button navigates to unexpected screens, skipping intermediate screens. History is corrupted or out of order.

  • Skip (N/A) when: Never — navigation history is essential to all apps.

  • Detail on fail: Describe the history issue. Example: "Pressing back after navigating Home → Details → Confirmation goes directly to Home, skipping Details" or "Navigation history doesn't reflect actual navigation path"

  • Remediation: React Navigation maintains navigation history automatically. Ensure you're not manipulating the navigation state in ways that corrupt history. Avoid using reset or popToTop unless explicitly needed:

    // Good: use navigate for normal navigation
    navigation.navigate('Details', { id: '123' })
    
    // Avoid: using reset() incorrectly
    // DON'T do this unless you intentionally want to rebuild the entire stack:
    // navigation.reset({
    //   index: 0,
    //   routes: [{ name: 'Home' }],
    // })
    
    // If you need to clear history (e.g., after logout), use reset() explicitly:
    function LogoutScreen() {
      useEffect(() => {
        navigation.reset({
          index: 0,
          routes: [{ name: 'Login' }],
        })
      }, [])
    }
    

Taxons

History