Complex navigation in SwiftUI
Tags: agilewebandappdevelo
Published: 2022-08-05 12:30:23

---
title: Complex navigation in SwiftUI
published: true
date: 2022-08-04 07:43:25 UTC
tags: Agilewebandappdevelo
canonical_url: https://apiumhub.com/tech-blog-barcelona/complex-navigation-in-swiftui/
---

Navigation in **SwiftUI** has been a major focus of the framework from day one, however when we tried to create an app that had a bit more navigation and view complexity we ran into the first problems.

Given the importance of navigation within an app, it has been revised and improved. In this **WWDC 22′** they have published a new **API** to build complex navigation flows making development easier.

To see its use we are going to build a small shopping list app and apply the new navigation changes to it.

## Shopping List

The example application is simply a shopping list where we can see different products and when we click on it we will navigate to their details.

![6](https://apiumhub.com/wp-content/uploads/2022/07/6.png "Complex navigation in SwiftUI 1")

## Prior iOS 16

Example of how the navigation settings of our app would look like before receiving iOS16 enhancements.

![2](https://apiumhub.com/wp-content/uploads/2022/07/2.png "Complex navigation in SwiftUI 2")

We all recognize the _NavigationView_ object that has brought us so many headaches. The first thing we are going to do is to change it since it has been deprecated for an improved version of this one.

## NavigationStack (NEW)

> A view that displays a root view and enables you to present additional views over the root view.

![1 1](https://apiumhub.com/wp-content/uploads/2022/07/1-1.png "Complex navigation in SwiftUI 3")

As we have commented before the navigation of our example app is a _master-detail_ navigation and as you can see it still uses _NavigationLink_ for each product in the list. It fulfils its purpose and does not mean that it is badly used, we will simply see that we will be able to improve it.

With iOS16 we are introduced to a new way of how to approach navigation, the new _navigationDestination_ view modifier.

## .navigationDestination(for:destination:) (NEW)

> Associates a destination view with a presented data type for use within a navigation stack.

This new modifier allows us to indicate the value we want to display along with the view we want to display for that particular value. We place it as we would any view modifier, specify the type and within the _closure_ we will specify the view to which we want to navigate.

![3](https://apiumhub.com/wp-content/uploads/2022/07/3.png "Complex navigation in SwiftUI 4")

Finally we must modify the init of the _NavigationLink_ to be able to pass the value to it.

The best of all is that the _NavigationStack_ works as a _stack_ of views, an array in which the types (and in turn, the views to which it is linked) are added in order and this array is exposed to us so that we can play with it. Apart from the array of products to popularize the view we are now going to declare an array as _@State_, we will call it path.

![4](https://apiumhub.com/wp-content/uploads/2022/07/4.png "Complex navigation in SwiftUI 5")

When we initialize the _NavigationStack_ we can now pass it the array as publisher.

![8](https://apiumhub.com/wp-content/uploads/2022/07/8.png "Complex navigation in SwiftUI 6")

This change allows us to modify the navigation stack as we wish. For example we can create a function to navigate directly to the offer of the day or the classic method to return to the beginning of the navigation stack. As easy as editing an array.

![5](https://apiumhub.com/wp-content/uploads/2022/07/5.png "Complex navigation in SwiftUI 7")

## The three rules of navigationDestination

When using the _.navigationDestination_ modifier we have to take into account these three rules.

1. The _navigationDestination_ modifier must always be inside a _NavigationStack_.
2. We should not put the _navigationDestination_ modifier as a child of any element considered as _lazy container_ such as _List, LazyVStack or LazyVGrid_ because these elements do not load the views immediately.
3. The _navigationDestination_ declared above will always overwrite those below it that conform to the _same type_.