ios – Presenting customized view on high of any view in SwiftUI

I do know there are just a few posts on the market associated to comparable matters, however none labored in my case.

Mainly, I’ve a posh utility the place there’s a important view and there are a number of panels (introduced in type of .sheet or .fullScreenCover over the principle view). Just one panel will likely be lively at a time over the principle view (just like Apple Maps).

I’ve a customized alert (as a full display cowl) created in type of modifier, however each time I need to current an alert over a sheet, I’ve to connect the customized alert modifier to that sheet. That is including numerous duplicate code throughout the app since I’m attaching modifiers to each sheet and I’m attempting out one thing the place the modifier is simply tied to the principle view and each time alert is to be introduced, regardless of which panel/sheet is open on important view, an alert needs to be displayed over the lively sheet.

Under is my code. I’ve tried to create a small pattern operating code since my app is advanced:

import SwiftUI

struct ContentView: View {
    @State non-public var showSheet = false
    @StateObject var viewModel: AppViewModel = AppViewModel()
    
    var physique: some View {
        VStack {
            Textual content("That is important view with a number of sheets.")
        }
        .padding(.backside, 350.0)
        .onAppear {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            SheetA().environmentObject(viewModel)
        }
        .customAlert(isPresented: $viewModel.showAlert) /// Want to current an alert at all times from right here, however the alert needs to be seen on high of any sheet that is open.
    }
}

struct SheetA: View {
    @EnvironmentObject var viewModel: AppViewModel
    
    var physique: some View {
        VStack {
            Textual content("That is sheet.")
            Spacer()
            Button {
                viewModel.showAlertFromSheet()
            } label: {
                Textual content("Faucet me")
            }
        }
        .padding([.top, .bottom], 150.0)
        .presentationDetents([.medium, .large], choice: $viewModel.panelDetent)
        // Observe: Works wonderful if I add this modifier to each sheet. However attempting to keep away from that.
        //.customAlert(isPresented: $viewModel.showAlert)
    }
}

class AppViewModel: ObservableObject {
    @Revealed var panelDetent: PresentationDetent = .medium
    
    @Revealed var showAlert: Bool = false
    
    func showAlertFromSheet() {
        // Make http request name and present an alert on failure
        self.showAlert = true
    }
}

Code for Customized Alert, incase if you happen to want to refer/execute it:

extension View {
    func customAlert(isPresented: Binding) -> some View {
        return modifier(CustomAlertView(isPresented: isPresented))
    }
}

struct CustomAlertView: ViewModifier {
    @Binding var isPresented: Bool
    
    init(isPresented: Binding) {
        self._isPresented = isPresented
    }

    func physique(content material: Content material) -> some View {
        content material.fullScreenCover(isPresented: $isPresented) {
            alertView123.background(CustomAlertBackground())
        }
        .transaction { transaction in
            transaction.disablesAnimations = true
        }
    }
    
    non-public var alertView123: some View {
        GeometryReader { geometry in
            if self.$isPresented.wrappedValue {
                VStack {
                    Picture(systemName: "data.circle.fill").resizable().body(width: 32.0, top: 32.0)
                        .padding(.high, 30).foregroundColor(Colour.blue)

                    Textual content("Alert Title").foregroundColor(Colour.main).font(.title2).daring().multilineTextAlignment(.heart)
                        .padding([.leading, .trailing], 20.0).padding(.high, 12.0)
                    Spacer()
                    
                    Textual content("Alert Message").foregroundColor(Colour.secondary).font(.physique).multilineTextAlignment(.heart)
                        .padding([.leading, .trailing], 20.0).padding(.high, 12.0)
                    Spacer()
                    
                    // Buttons
                }.fixedSize(horizontal: false, vertical: true).background(Colour.grey.opacity(0.5))
                .cornerRadius(28)
                .clipped()
                .padding([.leading, .trailing], 5.0)
                .place(x: geometry.measurement.width/2, y: geometry.measurement.top/2)
                .body(width: 350.0)
            }
        }
    }
}

struct CustomAlertBackground: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        return InnerView()
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
    
    non-public class InnerView: UIView {
        override func didMoveToWindow() {
            tremendous.didMoveToWindow()
            superview?.superview?.backgroundColor = UIColor(Colour.grey.opacity(0.25))
        }
    }
}

With the code above, alert is just not getting introduced and I get "At present, solely presenting a single sheet is supported. The subsequent sheet will likely be introduced when the at the moment introduced sheet will get dismissed." error in Xcode. I do not want to dismiss the sheet, however current a view (customized alert in my case) on high of it.

What’s one of the best ways to attain it as presenting the alert as full display cowl does not appear to be working?