SwiftUI has a new NavigationStack view, introduced by Apple at WWDC 2022. It will be available in iOS 16. It allows developers to manage navigation processes more easily by closing the deficiencies of the previously used NavigationView. Apple defines NavigationStack as:
Use a navigation stack to present a stack of views over a root view. People can add views to the top of the stack by clicking or tapping a <a href="https://developer.apple.com/documentation/swiftui/navigationlink">NavigationLink</a>, and remove views using built-in, platform-appropriate controls, like a back button or a swipe gesture. The stack always displays the most recently added view that hasn’t been removed and doesn’t allow the root view to be <a href="https://developer.apple.com/documentation/swiftui/navigationstack">removed</a>.
Before starting the details, I would like to remind you that you must use Xcode 14 and above to use all the features of NavigationStack. You can access Xcode 14 from this <a href="https://developer.apple.com/xcode/resources/">link</a>.
Let&#8217;s start with an example.
<h2>A Simple SwiftUI NavigationStack Usage</h2>
<pre><code class="language-swift">NavigationStack {
 NavigationLink(&quot;Navigate&quot;, value: &quot;AppCircle&quot;)
 .navigationDestination(for: String.self) { value in
 Text(&quot;Second screen&quot;)
 Text(&quot;Value is \(value)&quot;)
 }
}</code></pre>
<figure><img class="wp-image-3568 size-full alignnone" src="https://ac.appcircle.io/wp-content/uploads/2022/09/y6s15je.gif" alt="navigaton" width="296" height="640" /></figure>
We gave a string to our destination screen. Let&#8217;s convert it to a model object. The point here is that whatever the type of value we give in navigationLink is, we need to write that value type in the destination part.
Let&#8217;s improve our application by creating a model and add a method to generate some placeholder data.
<pre><code class="language-swift">struct Appcircle: Identifiable, Hashable {
 let id = UUID()
 let brand : String
 let price : Int
 let image : String
}

extension Appcircle {
 static var dummyData: [Appcircle] {
 return [
 .init(brand: &quot;iPhone 13&quot;, price: 799, image: &quot;iphone13&quot;),
 .init(brand: &quot;iPhone 4&quot;, price: 399, image: &quot;iphone4&quot;),
 .init(brand: &quot;iPhone 8&quot;, price: 599, image: &quot;iphone8&quot;)
 ]
 }
}</code></pre>
The image values here correspond to image names I&#8217;ve imported to my project. Now let&#8217;s display these values in our interface:
<pre><code class="language-swift">NavigationStack {
 List(Appcircle.dummyData) { item in
 NavigationLink(item.brand, value: item)
 }
 .listStyle(.plain)
 .navigationDestination(for: Appcircle.self) { item in
 Text(item.brand)
 .font(.largeTitle)
 .bold()
 Text(&quot;\(item.price)$&quot;)
 Image(item.image)
 .resizable()
 .scaledToFit()
 .frame(width: 300)
 }
 .navigationTitle(&quot;NavigationStack&quot;)
 }</code></pre>
<figure><img class="alignnone wp-image-3569 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/09/oAM6a8YI.gif" alt="navigationLink" width="296" height="640" /></figure>
This is the most basic form of using NavigationStack. Let&#8217;s take a look at how to manage programmatic navigation via NavigationPath.
NavigationStack can take a parameter named path. (NavigationStack(path: $path))
Let&#8217;s create a path and give it as a parameter to NavigationStack. Then, we&#8217;ll add a button to our detail screen so that it can reach different screens randomly. We&#8217;ll also print the path.count value on the screen to follow its depth easier.
After all these changes, our view code will look like:
<pre><code class="language-swift">struct ContentView: View {
 @State private var path = [Appcircle]()
 var body: some View {
 VStack {
 NavigationStack(path: $path) {
 List(Appcircle.dummyData) { item in
 NavigationLink(item.brand, value: item)
 }
 .listStyle(.plain)
 .navigationDestination(for: Appcircle.self) { item in
 Text(item.brand)
 .font(.largeTitle)
 .bold()
 Text(&quot;\(item.price)$&quot;)
 Image(item.image)
 .resizable()
 .scaledToFit()
 .frame(width: 300)
 Button(&quot;Navigate another page&quot;) {
 path.append(Appcircle.dummyData.randomElement()!)
 }
 }
 .navigationTitle(&quot;NavigationStack&quot;)
 }
 Text(&quot;Screen count: \(path.count)&quot;)
 .bold()
 }
 }
}</code></pre>
At the moment, we can easily manage our navigation operations programmatically.
Let&#8217;s add another button that will return users to the root view. We can give path.removeAll() or path = .init() as an action to the button. Alternatively we can use path.removeLast(2) to go back a certain number of times on the path. This is the final version of our application!
NavigationPath is very effective on pop and push on different data types from the stack as well.
<img class="aligncenter size-full wp-image-3589" src="https://ac.appcircle.io/wp-content/uploads/2022/09/fl_GYknS.gif" alt="SwiftUI NavigationStack - Full result" width="296" height="640" />
PS: NavigationView is deprecated with iOS 16. With this change, you can directly replace existing NavigationViews with NavigationStack. Still, don&#8217;t forget to review the init values. The NavigationLink(isActive:destination:label:) we currently use is now deprecated.
<h2>Conclusion</h2>
Building navigations in our SwiftUI apps was extremely easy with NavigationView. Now with SwiftUI 4.0&#8217;s NavigationStack we get more granular controls and the ability to navigate directly to a view that&#8217;s deeper in the hierarchy. 
To to read our other posts about WWDC22, I highly recommend the Developing with Live Activities API article <a href="https://blog.appcircle.io/article/live-activities-in-ios16">here</a>.

SwiftUI NavigationStack: How to Use the New Navigation View

Related Posts

Firebase App Distribution vs Appcircle Test Distribution

Is GitLab a Good Fit for Mobile CI/CD?

Integrating BrowserStack App Automate

SwiftUI NavigationStack: How to Use the New Navigation View

Related Posts

Firebase App Distribution vs Appcircle Test Distribution

Is GitLab a Good Fit for Mobile CI/CD?

Integrating BrowserStack App Automate

Subscribe to Appcircle Circle