Navigation and Data Passing in SwiftUI

Credit: Ralf Ebert

Navigation in SwiftUI is quite different than it is in UIKit. In UIKit, we use UINavigationController or segues for navigation, while in SwiftUI, we use NavigationView and NavigationLink to navigate between views.

Let’s start with basic navigation.

Credits: Tenor

Firstly will understand what NavigationView and NavigationLink can do.

NavigationView

The UINavigationController from UIKit is a stack that can be programmatically controlled so views can be pushed and popped as needed. SwiftUI’s NavigationView is nothing but UIKit’s UNavigationController. NavigationView is a container view that allows you to manage other views in a navigation interface.

How to add NavigationView?

Navigation views should be at the top of your view, but if you’re using them inside a TabView, the navigation view should be inside the tab view.

TabView:- A view that switches between multiple child views using interactive user interface elements. Check out this documentation for more details.

After converting the view into NavigationView, a navigation bar is added at the top of the view, which is currently not visible. Here are the navigation modifiers to show that.

Navigation Modifiers

1. navigationTitle: Creates a navigation bar with a title.

You can use navigationTitle on any view inside the navigationView; it doesn’t need to be the outermost one.

2. navigationBarTitleDisplayMode: Modifier configures the title display mode for this view, consisting of three options.

• large: shows large titles within an expanded navigation bar, which are useful for top-level views in your navigation stack.
• inline: shows small titles within the standard bounds of the navigation bar.
• automatic: It is the default one. Inherit the display mode from the previous navigation item.

3. navigationBarHidden: Modifier lets us control whether the whole bar is visible or hidden.

4. navigationBarBackButtonHidden: Modifier lets us control whether the back button is hidden or visible.

5. navigationBarItems: Add leading and trailing buttons to the navigation bar.

You can use these modifiers for customizing your navigation view. Now the question is how we can redirect to some other view.

NavigationLink

Using NavigationLink, we can navigate between views. The idea is to connect the views with NavigationLinks and to create an implicit navigation hierarchy using such links.

Basic example:-

1. Within our NavigationLink, we assign the destination. The destination can be whatever content or view we want to navigate to.
2. Create an instance that acts as a button that navigates to the assigned destination.

There are multiple ways to set up your NavigationLink; the above example is one of the simplest ways to handle basic navigation. Check out this documentation to know more.

How to present a View?

• SwiftUI’s sheet() modifier is used for presenting a view, and the user can drag down to dismiss the presented view.

1. Create an instance that acts as a button that navigates to the destination.
2. Add a @State variable to manage the state of view, i.e., presenting, presented, and dismissed, toggle it in the button’s action.
3. Pass the state variable in the .sheet() modifier and present any view you want.

For presenting full screen view, use the .fullScreenCover() modifier instead.

Passing data between views

• Passing data between views using a property
• Working with property wrappers — @State and @Binding

1. Passing data between views using a property

The simplest way of passing data between views is by using a property. Let’s suppose you want to pass a string to the destination view from your content view.

1. First, create a new view and name it DestinationView.swift.
2. Go to ContentView.swift, and add DestinationView in the destination so it will redirect us to destinationView.

3. Now add a String property in the destination view. This property will help us to show the data sent from ContentView.

4. Now add a String property to ContentView.swift. We also need to add this property as a parameter to DestinationView().

5. And that’s it! Now when you compile the code, you should see the message in DestinationView .

2. Working with property wrappers — @State and @Binding

In simple terms, a property wrapper is a generic structure that encapsulates read and write access to the property and adds additional behavior to it.

Credit: Devgenius

@State

State is used to represent the internal state of a SwiftUI view and to automatically make a view update when that state is changed. You should only access a state property from inside the view’s body or from methods called by it. For this reason, it is better to declare your state properties as private.

@Binding

@Binding is a property wrapper type that can read and write a value owned by a source of truth. It is used to connect a property that stores data and a view that displays and changes the data.

Credit: Better Programming

For example, when your friend’s “state” is angry, their faces changes from neutral to frowned to stark raving mad. If emotions are data, they can be represented by different states that change your friend’s facial expression, which is the view’s UI.

Example of @State and @Binding property wrapper

Let’s take an example of presenting a view that we have seen earlier using .sheet or .fullScreen modifiers. Here we’ll see how we can dismiss the presented view when the user taps on a button.

1. First, create a new view and name it PresentedView.swift.
2. Go to PresentedView and take a bool @binding variable into the view.
3. Add a button, so it can change the binding’s value back to false.

4. Setting PresentedView’s binding to false also updates the state in the PresentingView, causing the presented view to dismiss.

Both the presenting and presented views will point to the same Boolean value, so changing one changes it in the other place.

Conclusion

In this article, we’ve explored NavigationView and its companion view, NavigationLink. These two work together to perform the navigation between views. Then we learned about how to present a view in SwiftUI. Last but not least, we acquired a knowledge of data passing in SwiftUI. Great! Now you have learned the basic navigation and data passing in SwiftUI.

Hope this article has helped you and you’ve learned something new today. If you’ve enjoyed reading this article, be sure to throw me a couple of claps!👏

Happy Learning :)