Flow Stack separates navigation state from scene rendering so each stack can live wherever your interface needs it.
Building blocks
| Concept | Description |
|---|---|
| Provider | Owns the stack state. One per independent navigation context. |
| Screen | Declares a named route and its component. |
| Viewport | Renders the visible scenes and runs transitions. Separate from the provider so you can position it freely. |
| Scene | Individual scene container rendered by the viewport. Exposed for custom renderScene implementations. |
| Controller | The headless state machine. The provider wraps one internally; you can also create one directly. |
useNavigationStack | Hook that gives any component inside the provider access to push, pop, replace, reset, and the current state. |
Transition resolution order
Transitions are resolved in priority order: action options → route-level transition → stack-level transition → built-in fallback. Timing fields (duration, easing, enterCurve, exitCurve, stagger) and style fields (preset, translate, opacity, scale) are merged independently, so you can mix a string preset at the route level with a custom duration at the stack level.
Multiple independent stacks
Mount as many NavigationStackProvider instances as you need — each is fully isolated and identified by its id. When more than one stack is mounted, useNavigationStack(stackId) and <NavigationStackViewport stackId="..."> target a specific stack instead of the nearest provider.
Next: Provider guide · Viewport guide