Displaying multiple overlays with SwiftUI

Question

I'm trying to show multiple sheets with SwiftUI.

Overlay.swift

import SwiftUI

struct OverlayWith<Content: View>: View {
    let content: () -> Content
    @Environment(\.presentationMode) private var presentationMode
    
    var body: some View {
        VStack{
            Button(action: {
               self.presentationMode.wrappedValue.dismiss()
            }) {
                Image(systemName: "chevron.compact.down")
                    .resizable()
                    .frame(width: 40, height: 15)
                    .accentColor(Color.gray)
                    .padding()
            }
            
            content()
            Spacer()
        }
    }
}

struct OverlayView_Button1: View {
    var body: some View{
        Text("Button 1 triggered this overlay")
    }
}

struct OverlayView_Button2: View {
    var body: some View{
        Text("Button 2 triggered this overlay")
    }
}

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var overlayVisible: Bool = false
    // Button States
    @State var view1_visible: Bool = false
    @State var view2_visible: Bool = false
    
    var body: some View {
        VStack() {
            Button(action: {
                self.showSheet1()
            }, label: {
                Text("Button 1")
            })
            Button(action: {
                self.showSheet2()
            }, label: {
                Text("Button 2")
            })
        }
        .sheet(isPresented: $overlayVisible, content:{
            if self.view1_visible {
                OverlayWith(content: {
                    OverlayView_Button1()
                })
            } else if self.view2_visible {
                OverlayWith(content: {
                    OverlayView_Button2()
                })
            }
        })
    }
    
    func showSheet1(){
        self.resetButtonStates()
        self.view1_visible = true
        self.overlayVisible = true
    }
    
    func showSheet2(){
        self.resetButtonStates()
        self.view2_visible = true
        self.overlayVisible = true
    }
    
    func resetButtonStates(){
        self.view1_visible = false
        self.view2_visible = false
    }
    
}

Compiling this code for iOS 13 works as expected. For iOS 14 on the other hand showSheetX() opens a sheet with an empty view. Dismissing the sheet and opening it again shows OverlayView_ButtonX. Debugging shows that viewX_visible is false when showSheetX() was called for the first time. Is this a bug with iOS itself or am I missing something here?

Thank you in advance!

Does this answer your question? [Multiple sheet(isPresented:) doesn't work in SwiftUI](https://stackoverflow.com/questions/58837007/multiple-sheetispresented-doesnt-work-in-swiftui) — Curiosity, Mar 02 '21 at 23:06

score 0 · Accepted Answer · answered Aug 28 '20 at 15:54

I think I found the solution for this issue:

ContentView.swift

import SwiftUI


var view1_visible: Bool = false // <- view1_visible is not a state anymore
var view2_visible: Bool = false // <- view2_visible is not a state anymore

struct ContentView: View {
    @State var overlayVisible: Bool = false
    
    var body: some View {
        VStack() {
            Button(action: {
                self.showSheet1()
            }, label: {
                Text("Button 1")
            })
            Button(action: {
                self.showSheet2()
            }, label: {
                Text("Button 2")
            })
        }
        .sheet(isPresented: $overlayVisible, content:{
            if view1_visible {
                OverlayWith(content: {
                    OverlayView_Button1()
                })
            } else if view2_visible {
                OverlayWith(content: {
                    OverlayView_Button2()
                })
            }
        })
    }
    
    func showSheet1(){
        self.resetButtonStates()
        view1_visible = true
        self.overlayVisible = true
    }
    
    func showSheet2(){
        self.resetButtonStates()
        view2_visible = true
        self.overlayVisible = true
    }
    
    func resetButtonStates(){
        view1_visible = false
        view2_visible = false
    }
    
}

Feel free to explain to me why this code works. I'm really confused :S

Displaying multiple overlays with SwiftUI

1 Answers1