Component

Bottom Sheet

Learn to add Bottom Sheet to your iOS App (Supports Xcode 16 and iOS 18)

Bottom Sheet

Just copy the below code and modify according to your needs.

@State var shouldPresentSheet = false

    var body: some View {
        VStack {
          // ...
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(
                VStack {
                    Spacer() // Pushes the button to the bottom
                    HStack {
                        Spacer() // Pushes the button to the right
                        Button(action: {
                            shouldPresentSheet.toggle() // Toggles sheet On/Off
                        }) {
                            Image(systemName: "plus")
                                .foregroundColor(.white)
                                .padding()
                                .background(Color(.orange))
                                .clipShape(Circle())
                                .shadow(color: Color(.gray), radius: 2.5)
                        }
                        .sheet(isPresented: $shouldPresentSheet) {
                            print("Sheet dismissed!")
                        } content: {
                            Text("In the sheets!")
                        }
                        .padding()
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            )
    }

Time to build your iOS App?

ShipiOS provides you SwiftUI boilerplate, How-to Guides, Components Library and extra rewards!

Get ShipiOS Package
ShipiOS.App

I told you it's more than just a boilerplate :)

Made with ❤️ on 🌍

Need help? Reach out on:

© Copyright 2024 ShipiOS.App - All rights reserved.