Present a view modally in full screen in SwiftUI

Question

I need to present a view modally with fullscreen in SwiftUI.

In UIKit, following codes are enough to present a UIViewController modally with full screen:

let modalViewController = ModalViewController()
modalViewController.modalPresentationStyle = .fullScreen
present(modalViewController, animated: true, completion: nil)

In SwiftUI, we used sheet for modal view presentation:

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .sheet(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}

Without full screen presentation, sheet present the view like a card, which can be dismissed by pulling down the view.

I need a present a view modally in full screen so that can not be dismissed by pulling down.

How can I make this sheet modal presentation full screen like I done in previous UIKit code?

Answer 1

There are two ways to present a view modally in full screen in swiftUI

One

.fullScreenCover(isPresented:onDismiss:content:)

We need to use this particular modifier when we need to show single view

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .fullScreenCover(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}

Two

.fullScreenCover(item:onDismiss:content:)

When we have a list of item and we need to show each item details in modal view instead of navigation view, we need to use this modifier

Example codes

struct Person: Identifiable {
    var id = UUID()
    var name: String
}

struct PersonListView: View {
    let people = [
        Person(name: "Imran"),
        Person(name: "Anik"),
        Person(name: "Nayeem"),
        Person(name: "Linkon")
    ]
    
    @Environment(\.dismiss) var dismiss
    @State private var selectedPerson: Person?

    var body: some View {
        VStack {
            List(people) { person in
                Button(action: {
                    selectedPerson = person
                }) {
                    Text(person.name)
                }
            }
            
            Spacer()
            
            Button("Dismiss") {
                dismiss()
            }
        }
        .fullScreenCover(item: $selectedPerson) { person in
            PersonDetailView(person: person)
        }
    }
}

struct PersonDetailView: View {
    @Environment(\.dismiss) var dismiss
    let person: Person

    var body: some View {
        VStack {
            Spacer()
            Text(person.name)
                .font(.title)
            
            Spacer()
            
            Button("Dismiss") {
                dismiss()
            }
        }
        .padding()
    }
}

struct ContentView: View {
    var body: some View {
        PersonListView()
    }
}

Answer 2

Use either .fullScreenCover(isPresented:onDismiss:content:) or .fullScreenCover(item:onDismiss:content:) modifiers:

struct ContentView: View {
    @State private var showingSheet = false
    
    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .fullScreenCover(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}