SwiftSwiftUIAppleSnippet
Last updated at 2023-07-02

How to Present a View in SwiftUI

ClickUp
Note
AI Status
Last Edit By
Last edited time
Jul 2, 2023 06:38 AM
Metatag
Slug
how-to-present-a-view-in-swiftui
Writer
Published
Published
Date
Jun 26, 2023
Category
Swift
SwiftUI
Apple
Snippet
Many screen navigations in an application require presenting a view modally rather than using a stacking approach. It is either because the design requires full user attention or because it is simply designed to cover the view behind it. A login screen or a checkout screen is usually designed in such a way to increase the chance that a user will finish their interaction rather than go back to the previous screen.
If you are using SwiftUI, the chances that you need to present a screen modally come from the available design that you should follow.
SwiftUI provides an API for developers to easily present their destination screen.

Using the .sheet modifier

If you need to present in a modal sheet style, you can use the .sheet modifier. This modifier requires Identifiable? or Bool data.
🚦
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌 Join the Waitlist Today! https://mozzlog.com/projects/network-spy

Using Identifiable? data

You show a view when your Identifiable? data is not nil.
// .sheet(item: <Identifiable?>, content: (Identifiable) -> View)

struct User: Identifiable {
    let id = UUID()
    let age: Int
}

struct ContentView: View {
    @State var user: User?
    var body: some View {
        Button {
            user = User(age: 12)
        } label: {
            Text("Show User")
        }
        .sheet(item: $user) { user in
            Text("User age is: \(user.age)")
                .background(Color.red)
        }
    }
}
The user variable is an Identifiable of type User data with default value nil. When you tap the Button Show user, the user variable is populated, and it triggers .sheet modifier to show View in its content closure.

Using Bool data

You show a view when your Bool data is true.
// .sheet(isPresented: Binding<Bool>, content: () -> View)

struct ContentView: View {
    @State var isPresented = false
    var body: some View {
        Button {
            isPresented = true
        } label: {
            Text("Show User")
        }
        .sheet(isPresented: $isPresented) {
            Text("User is Presented")
                .background(Color.red)
        }
    }
}
The isPresented variable is a Bool data with the default value false. When you tap the Button Show user, the variable is set to true, and it triggers .sheet modifier to show View in its content closure.

Using the .fullScreenCover modifier

If you need to present in a cover style, you can use the .fullScreenCover modifier. This modifier requires Identifiable? or Bool data.

Using Identifiable? data

You show a view when your Identifiable? data is not nil.
// .sheet(item: <Identifiable?>, content: (Identifiable) -> View)

struct User: Identifiable {
    let id = UUID()
    let age: Int
}

struct ContentView: View {
    @State var user: User?
    var body: some View {
        Button {
            user = User(age: 12)
        } label: {
            Text("Show User")
        }
        .fullScreenCover(item: $user) { user in
            Text("User age is: \(user.age)")
                .background(Color.red)
        }
    }
}
The user variable is an Identifiable of type User data with the default value nil. When you tap the Button Show user, the user variable is populated, and it triggers .sheet modifier to show View in its content closure.

Using Bool data

You show a view when your Bool data is true.
// .sheet(isPresented: Binding<Bool>, content: () -> View)

struct ContentView: View {
    @State var isPresented = false
    var body: some View {
        Button {
            isPresented = true
        } label: {
            Text("Show User")
        }
        .fullScreenCover(isPresented: $isPresented) {
            Text("User is Presented")
                .background(Color.red)
        }
    }
}
The isPresented variable is a Bool data with the default value false. When you tap the Button Show user, the variable is set to true, and it triggers .sheet modifier to show View in its content closure. This presentation will cover your UI so you need to add dismiss button to the presented view.

Conclusion

There are two ways to present a view in SwiftUI, you can use .sheet or .fullScreenCover modifiers. It depends on your use case. If you find one that matches, use it and explore it.
Happy presenting a View!
🚦
With Network Spy you can monitor, inspect, and modify your network traffic during development. Perfect for debugging and more analysis. 🙌 Join the Waitlist Today! https://mozzlog.com/projects/network-spy
 

Discussion (0)

Related Posts