how to make the modal view with a transparent background in SwiftUI?

Question

Anyone knows how to to make the modal view with a transparent background.

Exactly like the below link in swift

Swift Modal View Controller with transparent background

Answer 1

I am using coordinator pattern, creating view in assembly

let view = UIHostingController(rootView: swiftuiview)
view.view.backgroundColor = .clear

inside router just present this UIHostingController

module.modalPresentationStyle = .overCurrentContext
navigationController.present(module, animated: animated, completion: nil)

Answer 2

If you wanting to blur the background of a SwiftUI from UIKit Project and are possibly using SwiftUI View for a Modal View then I had the same problem recently and created a UIViewController that takes the UIHostController (UIViewController basically), then alters the HostingController View's alpha, puts a blur at the back and presents it to the parent view.

I Have created a gist with the file in it for public use https://gist.github.com/Ash-Bash/93fd55d89c1e36f592d3868f6b29b259

Heres the working example:

// Initialises BlurredHostingController
var blurredHostingController = BlurredHostingController()

// Sets the Hosting View for the SwiftUI View Logic
blurredHostingController.hostingController = UIHostingController(rootView: ContentView())

// Blur Tweaks for blurredHostingController
blurredHostingController.blurEffect = .systemMaterial
blurredHostingController.translucentEffect = .ultrathin

// Presents View Controller as a Modal View Controller
self.present(blurredHostingController animated: true, completion: nil)

Here's the result from macCatalyst

Answer 3

Present:

let rootView = Text("Hello world")
let controller = UIHostingController(rootView: rootView)
controller.view.backgroundColor = .clear
UIApplication.shared.windows.first?.rootViewController?.present(controller, animated: true)

Dismiss:

UIApplication.shared.windows.first?.rootViewController?.dismiss(animated: true)

Answer 4

I didn't get the ideal way to do so, but I got a workaround for this.

So, In order to present a view modally, you can take a ZStack and group multiple views in it and handle it with a @State variable like this.

Here I have given the background colour to the view for better explanation.

struct ContentView : View {
   @State private var showModally = false
   var body : some View {
    ZStack {
        Color.red
        VStack {
            Button(action: {
                withAnimation{
                    self.showModally = true
                }
            }) {
                Text("Push Modally")
            }
        }
        
        ModalView(show: $showModally)
            .offset(y: self.showModally ? 0 : UIScreen.main.bounds.height)
            .animation(.spring())
        
    }
  }
}

struct ModalView: View {
  @Binding var show : Bool
  var body: some View {
    VStack {
        Spacer()
        
        VStack {
            Color.white
        }
        .frame(height : 400)
        .cornerRadius(10)
        .padding(.horizontal)
    }
    .background(Color.clear)
    .onTapGesture {
        self.show = false
    }
  }
}

In this, the Modal View will be presented modally over the content view and will be dismissed by a tap.