Navigation in SwiftUI with Xcode: From Theory to Practice

Navigating through iOS apps has undergone significant transformations over the years, and SwiftUI has been at the forefront of this evolution. In this guide, we’ll delve into the process of implementing navigation in SwiftUI with Xcode, offering a seamless transition from foundational theory to hands-on practice. Whether you’re an Apple developer nostalgic for the days of Objective-c ‘.xib’ files and storyboards or a newcomer eager to grasp the intricacies of modern iOS navigation, this comprehensive walkthrough promises clarity and actionable insights. Join us as we unpack the essentials of SwiftUI’s NavigationView, complete with practical Xcode examples and best practices.

This article will briefly discuss navigation in SwiftUI and explore the NavigationView in detail. We will then give you some practical code examples of implementing the SwiftUI NavigationView on an iOS project with Xcode. We will also provide you with some of the best practices for implementing a NavigationView on your projects.

So, fire up Xcode, and let’s get into it.

Navigation in SwiftUI

We have come far from Objective-c ‘.xib’ files and storyboards. If you were an Apple developer back in the day, navigation was one of your constant sources of pain and confusion.

Creating a robust and reliable user navigation experience was a significant headache. It didn’t help that the team at Cupertino needed to be more transparent with their vision of the ideal navigation workflow.

Thankfully, with the introduction of SwiftUI in 2019, it became much more evident that a better future was ahead.

No longer were iOS developers the pariah of comprehensive UI workflows, but they went to the forefront.

The SwiftUI NavigationView

As mentioned above, NavigationView is one of the most critical components of SwiftUI development. It allows for seamless navigation by quickly pushing and popping screens, delivering information in a straightforward, hierarchical way.

A NavigationView is a component for presenting a stack of views or other components that handles the navigation between these elements. If you come from UIKit, its equivalent would be the UINavigationController.

Navigation in the modern iOS development world refers to the navigation flow between screens in a stack-based manner where a screen is pushed to what is known as the navigation stack and popped out when leaving it. In simple terms, it’s a stack of screens displaying only the top screen. And much like any other stack, pushing and popping is the way to move.

Alright, enough theory. Let’s see it in action.

Implementing a SwiftUI NavigationView

If you haven’t already, create a new iOS app project and name it whatever you want.

Once inside your new application, check out the default structure that greets you.

Let’s add a List and some Text elements to make it more like a basic app layout.

Now, we can add a NavigationView right into the body structure and see that it doesn’t do much.

It just made the content smaller. But in reality, it’s doing a lot more behind the scenes.

This NavigationView creates a stack mechanism and puts the current view at its bottom. All you have to do now is indicate the possible navigation threats and their destinations. Let’s make it look more like an actual app.

Add the following modifiers to the NavigationView to showcase the navigation header.

Now, we can see that the screen looks more like your average settings screen. However, if you click on the options, it does nothing.

Navigating Between Screens

For actual navigation, you need to use a component known as NavigationLink. This component tells the NavigationView where to move you when interacting with it. It’s a directive for the NavigationView on what to push into the navigation stack.

To add the NavigationLink, you must provide a destination and label views. Doing so will yield the following view.

Notice that now the options have a chevron arrow at the right and are interactive. If you click on any of them, the NavigationView will navigate you to a second screen containing the Text element in the destination property.

Let’s modify the components to make it more fun.

Alright! Now we are talking.

But what about navigation between different classes?

You can only handle some of your application’s navigation in just one Swift class file. That would be ridiculous unless your app is highly simplistic.

Well, thankfully, SwiftUI makes it dead simple to navigate between files. You only have to reference it in the destination, and the NavigationView will handle it for you.

And…

It is that simple.

What if you want to pass information between views?

Again, it is a straightforward task. All you have to do is declare a @State variable on the destination class and pass it on to the parent class invocation. Make sure you specify a default value for this variable on the preview constructor of the destination class at the bottom.

There you go.

SwiftUI NavigationView Best Practices

It’s important to mention that, despite this working and being a viable solution for these specific requirements, you would be better off binding the variable’s state between the different classes.

To achieve this, you must replace the @State directive with @Binding on the destination class and add a @State variable on the parent class. Now, set the value on the parent class and pass the variable to the destination class prefixed by a ‘$’ character, which indicates to SwiftUI that you are passing a binding. Finally, add a default value to both previews and voila!

And in the destination class.

Finally, we want to mention that the NavigationView component has already been discontinued and is now replaced by the much more flexible NavigationStack.

If you want to learn more about this component and how to implement it in your projects, please check out my other articles here. You can find a wealth of information and guides on anything you might struggle with in your development journey.

Moving On

Navigation is the structural foundation of mobile applications. Without it, your application would be a mess of unrelated screens loosely related to each other without cohesion. Navigation allows the user to consume and interact with your application effectively. It gives context to an otherwise collection of views and elements.

For developers, understanding the basics of navigation and user flow is the foundation of building a robust product. And, nowadays, not applying the fundamental concepts and taking advantage of the modern tools available is a death sentence for your product.

In the ever-evolving landscape of iOS development, mastering tools like SwiftUI and Xcode is paramount. As we’ve explored, implementing navigation in SwiftUI with Xcode is not just about facilitating movement between screens, but about creating intuitive, user-friendly experiences. By leveraging the insights and best practices shared, developers can craft apps that resonate with users, blending functionality with impeccable design. As you continue on your development journey, remember that the key lies in continuously updating your knowledge and adapting to the latest in tech. Here’s to building more intuitive, navigable, and successful iOS apps in the future!

This post was originally written for and published by Waldo.com