How to navigate with SwiftUI

Ouail Bellal
Feb 9, 2020 · 5 min read

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

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

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 :

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)

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 .

Shoof Global

Here we share some about our experience at Shoof

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store