Present a view modally in full screen in SwiftUI – Swift

by
Ali Hasan
axios swift-concurrency swiftui-animation

The Solutions:

Solution 1: `fullScreenCover(isPresented:onDismiss:content:)`

This modifier is used to present a single view modally in fullscreen. It takes three parameters:

  • `isPresented`: A binding to a Boolean value that determines whether the modal view is presented.
  • `onDismiss`: An optional closure that is called when the modal view is dismissed.
  • `content`: A closure that returns the content of the modal view.

For example:

struct ContentView: View {
    @State private var showingSheet = false

    var body: some View {
        Button("Show Sheet") {
            showingSheet.toggle()
        }
        .fullScreenCover(isPresented: $showingSheet) {
            SecondView(name: "Imran")
        }
    }
}

Solution 2: Use `fullScreenCover` Modifiers

SwiftUI provides two `fullScreenCover` modifiers to present a view modally in full screen:

  • `.fullScreenCover(isPresented:onDismiss:content:)`: Use this modifier when you want to present a view based on a boolean property.
  • `.fullScreenCover(item:onDismiss:content:)`: Use this modifier when you want to present a view based on an optional value. The optional value passed as the `item` parameter determines whether the view is presented.

In your case, since you want to present a view based on a boolean property, you should use the .fullScreenCover(isPresented:onDismiss:content:) modifier, as shown in the following code:

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

When the showingSheet property is true, the SecondView will be presented in full screen. When the user dismisses the SecondView, the showingSheet property will be set to false, and the SecondView will be dismissed.

Q&A

How to present a view modally with fullscreen in SwiftUI?

Using .fullScreenCover(isPresented:onDismiss:content:) or .fullScreenCover(item:onDismiss:content:) modifiers.

What are the two modifiers that can be used to present a modal view fullscreen in SwiftUI?

fullScreenCover(isPresented:onDismiss:content:) and fullScreenCover(item:onDismiss:content:)

Video Explanation:

The following video, titled "How to present a full screen modal view using fullScreenCover ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

SwiftUI's fullScreenCover() modifier gives us a presentation style for times when you want to cover as much of the screen as possible, ...