SwiftUI - Adding dimmer view behind custom alert - ios

Question

I created a view modifier for reusable custom alert which works as expected. I now want to add a dimmer view in between presenting view and alert view i.e. view behind the alert which covers full screen and disables any clicks on the presenting view.
I tried adding background on the presenting view when alert is presented, but nothing is happening.
Custom alert view modifier, view extension and view model:
import Foundation
import SwiftUI
struct CustomAlertView: ViewModifier {
#Binding var isPresented: Bool
init(isPresented: Binding<Bool>) {
self._isPresented = isPresented
}
func body(content: Content) -> some View {
content.overlay(alertContent())
}
#ViewBuilder
private func alertContent() -> some View {
GeometryReader { geometry in
if self.$isPresented.wrappedValue {
VStack {
Image(systemName: "info.circle").resizable().frame(width: 30.0, height: 30.0).padding(.top, 30).foregroundColor(.cyan)
Text("Error title").foregroundColor(Color.black).font(.title2).bold().lineLimit(nil).padding([.leading, .trailing], 24.0).padding(.top, 16.0)
Spacer()
Text("There was an error while processing your request.").foregroundColor(Color.black).font(.body).lineLimit(nil).padding([.leading, .trailing], 18.0).padding(.top, 16.0)
Spacer()
Button(action: { self.$isPresented.wrappedValue.toggle() }) {
Text("Ok").foregroundColor(.white).font(.largeTitle).bold()
}.padding(.bottom, 25.0)
}.fixedSize(horizontal: false, vertical: true)
.background(Color.purple)
.cornerRadius(10)
.clipped()
.padding([.leading, .trailing], 5.0)
.position(x: geometry.size.width/2, y: geometry.size.height/2)
.frame(width: 328.0)
}
}
}
}
extension View {
func customAlert(isPresented: Binding<Bool>) -> some View {
return modifier(CustomAlertView(isPresented: isPresented))
}
}
class CustomViewModel: ObservableObject {
#Published var showAlert = false
func doSomething() {
// Sets showAlert to true incase of network disconnect or some query failure.
self.showAlert = true
}
}
Content view:
import SwiftUI
struct ContentView: View {
#ObservedObject var viewModel: CustomViewModel = CustomViewModel()
var body: some View {
VStack {
Spacer()
Button(action: { viewModel.doSomething() }) {
Text("Start").foregroundColor(Color.red).font(.title)
}.padding(.bottom, 100.0)
}
.background(viewModel.showAlert ? Color.gray : Color.clear)
.customAlert(isPresented: $viewModel.showAlert)
}
}
Here, ContentView is the presenting view since it's what is presenting the alert. I want to add a grayish sort of view/dimmer view covering full screen and it will be below the presented alert. When dimmer view is present and I click on "Start" button in ContentView, it should be disabled. I don't know if I can achieve this by modifying the custom alert view modifier, hence I was trying to add a background color to ContentView, but nothing seems to be happening. I have too much of code in the view model and content view, so I removed most of it and kept what I thought was needed.
How do I achieve it?

Answer 1

I was able to add a view behind the custom alert view modifier. Adding code here incase if someone comes looking for it in future.
I removed ".background(viewModel.showAlert ? Color.gray : Color.clear)" from my content view since I eventually wanted the logic to be part of custom alert view modifier and not add it to every view. In my customAlertView, I modified the body function as below:
func body(content: Content) -> some View {
content.overlay(self.$isPresented.wrappedValue ? Color.gray.ignoresSafeArea() : nil)
.overlay(self.$isPresented.wrappedValue ? alertContent() : nil)
}