Working with the new NavigationStack in SwiftUI

In iOS growth, navigation view is unquestionably one of the crucial generally used elements. When SwiftUI was first launched, it got here with a view known as NavigationView for builders to construct navigation-based consumer interfaces. With the release of iOS 16, Apple has deprecated the previous navigation view and launched a brand new view often known as NavigationStack to current a stack of views. Most significantly, builders could make use of this new view to construct knowledge pushed navigation.

The Outdated Method of Navigation Views

Previous to iOS 16, you create a navigation interface utilizing NavigationView and NavigationLink like this:

This creates a primary navigation based mostly interface with a Faucet me button. When tapped, the app navigates one degree all the way down to show the vacation spot view.

Working with NavigationStack

Ranging from iOS 16, you substitute NavigationView with the brand new NavigationStack. You may preserve the NavigationLink intact and obtain the identical outcome.

The identical piece of the code will also be written like this:

We often use navigation views to construct a master-detail stream for a listing of information objects. Right here is an instance:

This creates a navigation view to show a listing of coloration objects. When an merchandise is chosen, the app navigates to the element view and reveals the colour view.

Worth-based Navigation Hyperlinks

NavigationStack introduces a brand new modifier known as navigationDestination that associates a vacation spot view with a offered knowledge kind. The identical piece of code within the earlier part will be rewritten like this:

You continue to use NavigationLinks to current the listing of information and implement the navigation function. What’s distinction is that every NavigationLink associates with a worth. On high of that, we added the brand new navigationDestination modifier to seize the worth change. When a consumer selects a selected hyperlink, the navigationDestination modifier presents the corresponding vacation spot view for navigation hyperlinks that current knowledge of kind Coloration.

Should you take a look at the app within the preview, it really works precisely the identical as earlier than. Nonetheless, the interior implementation already makes use of the brand new navigationDestination modifier.

A number of Navigation Vacation spot Modifiers

You’re allowed to outline multiple navigationDestination modifier for dealing with various kinds of the navigation hyperlinks. Within the earlier instance, we had a single navigationDestination modifier for the Coloration kind. Let’s say, we have now one other set of navigation hyperlinks for the String kind like this:

The systemImages variable shops an array of the system picture names.

On this case, we have now two sorts of navigation hyperlinks. One is for the Coloration kind, the opposite is the String kind. To deal with the navigation of the String kind, we are able to embed one other navigationDestination modifier to the stack like this:

Now if the consumer faucets one of many system picture names, it navigates to a different view that shows the system picture.

Working with Navigation States

Not like the previous NavigationView, the brand new NavigationStack means that you can simply preserve monitor of the navigation state. The NavigationStack view has one other initialization methodology that takes in a path parameter, which is a binding to the navigation state for the stack:

If you wish to retailer or handle the navigation state, you may create a state variable. Here’s a code pattern:

The code is much like the earlier instance. We added a state variable named path, which is an array of Coloration, to retailer the navigation state. Through the initialization of NavigationStack, we go its binding for managing the stack. The worth of the path variable might be routinely up to date when the navigation stack’s state modifications.

I made a minor change for the navigation vacation spot. It shows the consumer’s chosen colours and reveals one other listing of colours for additional choice.

Within the code above, we have now this line of code to show the trail content material:

The rely property offers you the variety of ranges of the stack, whereas the outline presents the present coloration. Say, for instance, you first choose the colour indigo after which additional selects yellow. The worth of rely is 2, which implies the navigation stack has two ranges.

With this path variable, you may programmatically management the navigation of the stack. Let’s say, we are able to add a button for customers to leap on to the foundation degree of the stack. Right here is the pattern code:

By resetting the worth of the path variable, we are able to instruct the navigation stack to return to the foundation degree.

As it’s possible you’ll already conscious, we are able to manipulate the worth of the path variable to regulate the state of the navigation stack. For instance, when the ContentView seems, the app can routinely navigate down three ranges by including three colours to the path variable like this:

If you launch the app, it routinely navigates down three ranges. That is how one can management the navigation state programmatically and an effective way to deal with deep linking.

Abstract

The brand new NavigationStack, launched in iOS 16, permits builders to simply construct data-driven navigation UI. In case your app doesn’t have to assist older variations of iOS, you may make the most of this new element to deal with deep linking and complicated consumer flows.