How to navigate with SwiftUI

SwiftUI

As IOS developers know, Apple released SwiftUI few months ago

SwiftUI is a modern way to declare user interfaces for any Apple platform. Create beautiful, dynamic apps faster than ever before.

With SwiftUI your IOS application will follow the MVVM architectural pattern , In this article I’ll show you how to navigate in an IOS app by following this pattern.

Let’s suppose that we have a master-detail app which means a list with some details for each row

I’ll write all the code in one struct , just for rapidity sake , but it ‘s recommended to separate each view with a struct , to make it reusable.

Simple List Using SwiftUI With The Preview

1- NavigationView :

Let’s use the NavigationView in our application to make each row take us to another View, Again to make it easy our detail view will be just another Text with a different content

Our code will be :

Simple NavigationView and List Using SwiftUI With The Preview

Here i added a NavigationView with a bar title “Medium” , and i changed the view of each row to a NavigationLink , which will handle the user click to take him to the destination

Now when the user click on [Row 1] it will take him to the UI below :

So this is the first way to navigate from a page to another one using SwiftUI

2- Sheet

Let’s suppose that we have a navigation bar item which should move us to another page to see the available categories , How to do this with SwiftUI ?

We need to call navigationBarItems modifier , this one has an action parameter , so when the user click on this bar item , the app will take him to the categories view

To deal with this , we need a boolean variable with the annotation @ State (this is one of the property wrappers that SwiftUI give us) , and now following the MVVM pattern , SwiftUI will listen to this variable changes to update the UI (in our case to show a sheet)

And it’s clear now that by changing the value of the boolean variable , the app will update the UI, so I will change it inside the navigationBarItem click action

let’s call it showCategoriesSheet and let’s initialize it with false

Enough of talk , let’s move to the code

And After clicking on the the navigationBarItem , the view will be updated to :

3- Conditionally show a view

If someone wants to show another view with a full presentation not modal presentation , he can use the @ State variable showCategoriesSheet to check on it and decide which view will be visible to the user

The code will be like the image below :

As you noticed , I moved the code inside the sheet block to the else block

And after clicking on the navigation bar item , the whole view will be changed to the view in the else block ( as the shown image)

4- Button & NavigationLink

conditional show is good in case of login / main page as example , because we won’t give to the user the ability to navigate back to the login page when he logged successfully.

Now maybe someone want to navigate to another page (View) , but instead of this modal presentation he needs a full presentation ,but with the NavigationView style

to get what i mean , i’m talking about this part :

it’s easy to do this using the NavigationLink , like we did in the first example , but the problem is when we want to move to another page using a button action (for example if we need to move to another page after doing some background jobs)

Well actually it is not a problem , we can use NavigationLink but with another signature which is :

NavigationLink(destination: _ , isActive: _ , label: _ )

This one take a Bindable variable (isActive) , so when isActive == true the link will be executed and it takes the user to the second page ( categories in our case )

Now i added a NavigationLink which contains an EmptyView , with a destination , this link will listen to showCategoriesSheet changes to update the UI , and the result after clicking on the bar item will be like the shown image. with the back button.

Again , it’s recommended to split your views , each view in a separate struct for reusability and maintainability sake

Also in my example i used a simple basic UI , but you can apply this in your complex UI

I’ll try to update this article if i found another use cases in future .