How to Deal With Modal Views in SwiftUI

Everything you need to know about sheets

When presenting a small piece of extra information on the screen, showing a modal view is essential. With UIKit, we could do this with presentViewController:animated:completion: function.

However, when using SwiftUI, we need to shift our thinking towards using view or environment state, as the modal view is now called a sheet.

Let’s check this out in detail.

Open Modal View (aka Sheet)

SwiftUI sheets help us show a modal view to users. sheet is an instance method to the View Presentation. It describes how we can show our SwiftUI views, covering specific user journey scenarios.

Let’s say we want to display information about our app to users.

Firstly, we need to define whether the app should show a modal view or not, binding this with the Bool value.

The keyword here is “should” because once we dismiss it, the presented view value is set back to false. This value is decorated with an @State property wrapper or could come from the ObservableObject ViewModel. For simplicity’s sake, we’re not going to talk about ViewModels in this post.

Secondly, we need to change the view or, in some cases, the environment state. Once we are using the @State property wrapper, we can just set it to true and SwiftUI will do the rest to present the modal view.

Let’s look at how we can do it in the code:

When we run the app, we can now open the modal view and see the detailed information:

Close Modal View Programmatically

Our app users can simply slide the modal view down, and it will hide with a nice animation. Set the state to false to hide this from the view responsible for showing the modal view.

Now how do we do it from the modal view itself? We have these two options at our disposal:

• Using the @Environment property presentationMode.
• Passing the state to the modal view as a binding.

Using Environment

The property wrapper @Environment allows us to read and change the values of the view environment state. To hide the modal view, we need to change the presentationMode property. At first, we need to define our view. To do this, we add it to the modal view properties. To dismiss the modal view, we need to alter the presentation mode wrapped value:

This method is quite cumbersome, and dealing with environmental properties can cause accidental issues that are difficult to track down and debug.

Using a binding

Using a binding between the view that is presenting the modal view and the modal view itself is another method to hide it from the code.

First, we need to add a new property to the modal view structure using the @Binding property wrapper. This describes that this value comes from somewhere else outside the view scope.

Now when we are initializing the ModalView, we need to pass the isPresented:

.sheet(isPresented: $showInfoModalView) {
    InfoView(isPresented: $showInfoModalView)
  }

Using this approach, we are sure that this variable only belongs to these two views. It is more straightforward to test and debug.

Multiple Sheets on One SwiftUI View

Now we know how to present a modal view, but how can we show multiple modal views?

Imagine we would like to present information about the app and the settings view from the primary app view.

We can do this using these two approaches:

• Using multiple sheets presenting functions.
• Using the Identifiable enum to keep the state of the currently shown sheet.

Multiple sheet functions in one SwiftUI view

We can attach the sheet function to any SwiftUI view or control (e.g. to the Button):

It can be fine to have two buttons, but let’s say we have more than that. It can get quite messy, so we should deal with many @State variables.

Using enumeration of all modal views

If we look at Apple’s official documentation, there is another function to show a sheet. Let’s try to use it.

At first, we will define an enum with all modal view options:

enum Sheet: Identifiable {
    case info
    case settings
  }

Now we can use this in the SwiftUI view. We need a new @State variable with the optional type Sheet and to use this to determine which modal view we would like to present:

We don’t need to stop here. We can declutter this code by adding a computed property to the Sheet enum:

Then we can use it when opening the sheet:

.sheet(item: $activeSheet) { $0.modalView }

Using the fancy new keypaths functionality in closures, we can simplify this even more:

.sheet(item: $activeSheet, content: \.modalView)

One caveat to this approach is that we need to change part of our process to hide the view from the code. To do this, we set it to nil instead of false.

This approach is much safer because we use the enumeration type to keep everything well organized.

Let’s see it in action.

TL;DR

Modal views in SwiftUI are presented using the sheet modifier on a view or control. The simplest way is to have an @State property to indicate when it should be visible.

To hide the modal view, we can use the environment parameter or pass a binding to the modal view object. Showing multiple sheets can be achieved either with multiple sheet modifiers or by using an object with all possible modal view enumerations.

Resources

• Demo app — there are multiple branches for everything we talked about
• Apple official documention
• How to present a sheet modally in SwiftUI
• Alerts, Action Sheets, Modals and Popovers in SwiftUI
• How to present a new view using sheets
• How to manage multiple sheets in SwiftUI
• Thread in StackOverflow
• Enums for Multiple Sheets
• MultiSheet