SwiftUI Dismiss Multiple Modal Sheets

Question

I am using .sheet(isPresented: self.$showModal) in my root view to present a modal. Within the modal, I am using NavigationView to take the user through various pages (for a user profile builder).

In the last page of my navigation stack, I am using @Environment(\.presentationMode) var presentationMode and a button which calls self.presentationMode.wrappedValue.dismiss() to dismiss the modal. However, this only dismisses the last page in the navigation stack, and I just end up at the previous page. What I want to do is dismiss the entire navigation stack and end up back at the root view.

Swiping down to dismiss the modal produces the desired result, but I want to do this programatically with the button.

Is this currently possible in SwiftUI, or is this a problem with using NavigationView within a modal sheet?

Answer 1

Solution 1 - Custom EnvironmentKey

A possible solution is to use a custom EnvironmentKey injected to every environment:

struct PresentationKey: EnvironmentKey {
    static let defaultValue: [Binding<Bool>] = []
}

extension EnvironmentValues {
    var presentations: [Binding<Bool>] {
        get { return self[PresentationKey] }
        set { self[PresentationKey] = newValue }
    }
}

---

Demo:

struct ContentView: View {
    @Environment(\.presentations) private var presentations
    @State private var showSheet = false

    var body: some View {
        Button("Show sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            SheetView()
                .environment(\.presentations, presentations + [$showSheet])
        }
    }
}

struct SheetView: View {
    @Environment(\.presentations) private var presentations
    @State private var showSheet = false

    var body: some View {
        Button("Show another sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            SheetNavigationView()
                .environment(\.presentations, presentations + [$showSheet])
        }
    }
}

struct SheetNavigationView: View {
    var body: some View {
        NavigationView {
            NavigationLink("Link", destination: SheetNavigationDetailView())
        }
    }
}

struct SheetNavigationDetailView: View {
    @Environment(\.presentations) private var presentations

    var body: some View {
        Button("Pop to root") {
            presentations.forEach {
                $0.wrappedValue = false
            }
        }
    }
}

---

Solution 2 - Dismiss UIKit rootViewController

struct SheetNavigationDetailView: View {

    var body: some View {
        Button("Pop to root") {
            UIApplication.shared.windows.first?.rootViewController?.dismiss(animated: true)
        }
    }
}

Answer 2

You can pass showModal as a binding into the following screens and instead of using presentationValue set showModal to false.

Answer 3

@State private var modalOpen: Bool = false

.sheet(isPresented: self.$modalOpen, onDismiss: {
            // code that triggers when modal is closed
        }) {
        Button(action: {
            self.modalOpen.toggle()
        }) {
           Text("Schließen")
        }

Answer 4

In SwiftUI.

Use SheetKit to dismiss all sheets with animation controll.

SheetKit().dismissAllSheets(animation:false)

or Use NavigationViewKit to pop back to root view in navigationView

Answer 5

Here is the full functional example of nested modals closed on the last screen ( number #3 ) from the Close button for someone who might need it.

So below we have the main screen where we initiate and trigger modal:

struct OnboardingFlowModal: View {
    @State private var showOnboardingFlow: Bool = false
    
    var body: some View {

        VStack(spacing: 50){
            Text("content of main screen".capitalized)
            
            Spacer()
            
            Button {
                showOnboardingFlow.toggle()
            } label: {
                Text("Start Onboarding")
            }
            .buttonStyle(.borderedProminent)
            .buttonBorderShape(.roundedRectangle(radius: 12))
            .controlSize(.large)
            .padding()
            
        }
        .sheet(isPresented: $showOnboardingFlow,
               onDismiss: didDismiss) {
            ScreenOne(showOnboardingFlow: $showOnboardingFlow)
        }
        
    }
    
    func didDismiss(){
        //dismiss function here
        
    }
}

Screen #1, which starts the navigation flow for the modal screens:

struct ScreenOne: View {
    
    @Binding var showOnboardingFlow: Bool
    
    var body: some View{
        NavigationView {
            VStack{
                Text("Welcome to screen #1".capitalized)
            }
            .navigationTitle("Screen #1")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    NavigationLink {
                        ScreenTwo(showOnboardingFlow: $showOnboardingFlow)
                    } label: {
                        Text("Next")
                    }
                    
                }
            }
        }
    }
}

Screen #2 for illustrative purposes, where we have the button towards the last modal in the navigation:

struct ScreenTwo: View {
    
    @Binding var showOnboardingFlow: Bool
    
    var body: some View{
        
        VStack{
            Text("Welcome to screen #2".capitalized)
        }
        .navigationTitle("Screen #2")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                NavigationLink {
                    ScreenThree(showOnboardingFlow: $showOnboardingFlow)
                } label: {
                    Text("Next")
                }
                
            }
        }
    }
}

Screen #3, where the Close button is displayed and it closes all of the nested modals:

struct ScreenThree: View {
    
    @Binding var showOnboardingFlow: Bool
    
    var body: some View{
        VStack{
            Text("Welcome to screen #3".capitalized)
        }
        .navigationTitle("Screen #3")
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Button {
                    showOnboardingFlow = false
                } label: {
                    Text("Close")
                }
            }
        }
    }
}