XState ❤️ NoNav - Taking Back Control Of Navigation

Leflour traces navigation from physical information systems, such as finding a book by shelf and page, to hierarchical file systems and web links. As websites became interactive, single-page apps shifted routing, display components, and session state toward the client.

Leflour maps navigation onto Flux: components display state, while navigation actions update a stack managed by a library. Passing destination page names can couple pages to each other, and a separate navigation service can turn navigation into a side effect. In his Dropbox login and folder-picker example, adding navigation links many parts of the app.

Leflour argues that mobile apps do not need to preserve the web’s page-and-stack model. The NoNav concept, coined by BAM design lead Caroline Benner, prioritizes product needs and faster access to features. Messenger reduced its navigation from eight tabs across two bars to three tabs, while Uber used four journey-specific home pages to avoid navigation.

React NoNav, published by Thomas Pucci, separates transitions from the app’s own state. Its canal component handles transitions between children, while screen components declare their display state. Leflour says this lets the app maintain a single source of truth for navigation state.

Leflour uses XState to compute screen changes from events and context, avoiding nested conditions as journeys grow. He describes states, events, transitions, context, services, and actions, and shows how nested and parallel machines can isolate reusable flows such as login and folder selection. His recommendation is to use React Navigation for declarative transitions and XState for context and complex journeys.