A Quick Guide to SwiftUI's NavigationStack

SwiftUI's NavigationStack is a new powerful tool for creating hierarchical navigation within your app(and it's available from iOS 16). This component allows you to present a stack of views over a root view and manage the navigation between them. In this guide, we'll explore how to use NavigationStack effectively with some short code examples.

A Short Overview

The NavigationStack is designed to present a stack of views over a root view, enabling users to navigate between them seamlessly. You can add views to the stack by using NavigationLink and remove views using built-in navigation controls such as a Back button or swipe gestures. Here's how you can create a basic navigation stack:

Copycopy code to clipboard
1import SwiftUI
2
3struct HomeView: View {
4    @State private var displayedItems: [Item] = []
5
6    var body: some View {
7        NavigationStack(path: $displayedItems) {
8            List(products) { product in
9                NavigationLink(product.name, value: product)
10            }
11            .navigationDestination(for: Product.self) { product in
12                ProductDetailsView(product: product)
13            }
14        }
15    }
16}

In this example, we use NavigationStack to manage the navigation stack and the @State property displayedItems to keep track of the views in the stack.

Managing Navigation State

By default, the NavigationStack manages the state for you. However, you can share control of the state by initializing the stack with a binding to a collection of data values that you create. The stack adds items to the collection as it adds views to the stack and removes items when it removes views.

For instance, you can create a method to update the stack's state programmatically:

Copycopy code to clipboard
1func showItems() {
2    displayedItems = [Item("Widget X"), Item("Gizmo Y")]
3}

This method replaces the stack's display with a view showing details for "Gizmo Y," the last item in the new displayedItems array. Navigating back from that view removes "Gizmo Y" from the array, revealing a view that displays details for "Widget X." This enables programmatic navigation control. You can even programatically remove items from the stack like this:

Copycopy code to clipboard
1displayedItems.removeLast()

Navigate to Different View Types

You can create a stack that can present more than one kind of view by adding multiple navigationDestination(for:destination:) modifiers inside the stack's view hierarchy. Each modifier can present a different data type, allowing you to have diverse views in your stack based on their data types.

Copycopy code to clipboard
1NavigationStack(path: $displayedViews) {
2    List(contents) { content in
3        NavigationLink(content.title, value: content)
4    }
5    .navigationDestination(for: Content.self) { content in
6        if content.isArticle {
7            ArticleContentView(article: content)
8        } else {
9            VideoPlayerView(video: content)
10        }
11    }
12}

In this example, we have a stack of Content objects, and the NavigationStack can navigate to either an ArticleContentView or a VideoPlayerView based on the isArticle property of the selected content. This flexibility is especially useful when dealing with different view types within your app.

SwiftUI's NavigationStack is a versatile tool for managing hierarchical navigation within your app. Whether you want to navigate to different view types, manage navigation state, or create unique navigation experiences, the NavigationStack is your new go-to solution.