TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

Programmatic navigation with NavigationStack

Paul Hudson    @twostraws   

Programmatic navigation allows us to move from one view to another just using code, rather than waiting for the user to take a specific action. For example, maybe your app is busy processing some user input and you want to navigate to a result screen when that work is finished – you want the navigation to happen automatically when you say so, rather than as a direct response to user input.

In SwiftUI this is done by binding the path of a NavigationStack to an array of whatever data you're navigating with. So, we might start with this:

struct ContentView: View {
    @State private var path = [Int]()

    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                // more code to come
            }
            .navigationDestination(for: Int.self) { selection in
                Text("You selected \(selection)")
            }
        }
    }
}

That does two important things:

  1. It creates an @State property to store an array of integers.
  2. It binds that property to the path of our NavigationStack, meaning that changing the array will automatically navigate to whatever is in the array, but also changes the array as the user presses Back in the navigation bar.

So, we could replace the // more code to come with buttons such as these:

Button("Show 32") {
    path = [32]
}

Button("Show 64") {
    path.append(64)
}

In the first button we're setting the whole array so that it just contains the number 32. If anything else happened to be in the array it will be removed, meaning that the NavigationStack will return to its original state before navigating to the number 32.

In the second button we're appending 64, meaning that it will be added to whatever we were navigating to. So, if our array already contained 32, we'd now have three views in the stack: the original view (called the "root" view), then something to show the number 32, and finally something to show the number 64.

You can also push multiple values at the same time, like this:

Button("Show 32 then 64") {
    path = [32, 64]
}

That will present a view for 32 then a view for 64, so the user needs to tap Back twice to get back to the root view.

You can mix user navigation and programmatic navigation as much as you want – SwiftUI will take care of making sure your path array stays in sync with whatever data you show, regardless of how it's shown.

Hacking with Swift is sponsored by Superwall.

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

Sponsor Hacking with Swift and reach the world's largest Swift community!

BUY OUR BOOKS
Buy Pro Swift Buy Pro SwiftUI Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.2/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.