I've adapted the demo view with a TabView, and in the bottom sheet a ScrollView instead of List. When using List, the scroll element pushes the bottom of the list upwards to account for the tab selection bar. But when I use a ScrollView, like below, the last item is obscured by the tab selection bar. Do you know how to account for this? Is it a SwiftUI issue?

struct DemoSheetContent: View {
    init(style: BottomSheetStyle) {
        self.style = style
    }
    var style: BottomSheetStyle
    
    var body: some View {
//        List {
//            ForEach(1...20, id: \.self) {
//                Text("\($0)")
//            }
//            .listRowBackground(style.color)
//        }
        ScrollView {
            VStack {
                ForEach(1...20, id: \.self) { i in
                    HStack {
                        Text("Item \(i)")
                        Spacer()
                        Button(
                            action: { print("Clicked \(i)") },
                            label: {
                            Image(systemName: "tray.and.arrow.down.fill")
                        })
                    }
                    .padding()
                    .frame(minHeight: 50)
                }
            }
        }
    }
}

struct DemoSheetContent_Previews: PreviewProvider {
    static var previews: some View {
        DemoSheetContent(style: .standard)
    }
}

struct ContentView: View {
    var body: some View {
            TabView {
                SettingsView()
                            .tabItem {
                                Label("Tab 1", systemImage: "list.dash")
                            }

                SettingsView()
                            .tabItem {
                                Label("Tab 2", systemImage: "square.and.pencil")
                            }
            }
    }
}

struct SettingsView: View {
    @State private var useTallerMinHeight = false
    @State private var useShorterMaxHeight = false
    @State private var sheetStyle = BottomSheetStyle.standard
    
    @State private var isExpanded = false
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("").frame(height: 1)) {
                    Toggle("Is expanded", isOn: $isExpanded)
                    Toggle("Use taller min height", isOn: $useTallerMinHeight)
                    Toggle("Use shorter max height", isOn: $useShorterMaxHeight)
                }
                
                Section(header: Text("Sheet Styles").frame(height: 1)) {
                    sheetStyleButton("Standard", style: .standard)
                    sheetStyleButton("(Demo) Red", style: .demoRed)
                    sheetStyleButton("(Demo) Green", style: .demoGreen)
                    sheetStyleButton("(Demo) Blue", style: .demoBlue)
                    sheetStyleButton("(Demo) Larger Corner Radius", style: .demoRound)
                }
                
                Section(header: Text("Sheet Handle Styles").frame(height: 1), footer: bottomPadding) {
                    sheetHandleStyleButton("Standard", style: .standard)
                    sheetHandleStyleButton("(Demo) Red", style: .demoRed)
                    sheetHandleStyleButton("(Demo) Green", style: .demoGreen)
                    sheetHandleStyleButton("(Demo) Blue", style: .demoBlue)
                    sheetHandleStyleButton("(Demo) Large Yellow", style: .demoLargeYellow)
                }
            }
            .buttonStyle(PlainButtonStyle())
            .navigationTitle("Bottom Sheet Demo")
            .listStyle(InsetGroupedListStyle())
        }
        .bottomSheet(sheet)
    }
}

private extension SettingsView {
    
    var bottomPadding: some View {
        Color.clear.frame(height: useTallerMinHeight ? 280 : 130)
    }
    
    var sheet: some BottomSheetView {
        BottomSheet(
            isExpanded: $isExpanded,
            minHeight: useTallerMinHeight ? .points(300) : .points(150),
            maxHeight: useShorterMaxHeight ? .percentage(0.5) : .available,
            style: sheetStyle) {
            DemoSheetContent(style: sheetStyle)
        }
    }
    
    func listButton(_ text: String, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack {
                Text(text)
                Spacer()
            }.background(Color.white.opacity(0.0001))
        }
    }
    
    func sheetStyleButton(_ text: String, style: BottomSheetStyle) -> some View {
        listButton(text) {
            sheetStyle = style
        }
    }
    
    func sheetHandleStyleButton(_ text: String, style: BottomSheetHandleStyle) -> some View {
        listButton(text) {
            sheetStyle = BottomSheetStyle(handleStyle: style)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Hello 👋🏻

I'm attempting to use BottomSheet to build my Movie app Sonix (I'm fairly new to Swift/SwiftUI) basically i'm trying to replicate the design which is attached so each movie opens BottomSheet at full width. At the moment the only way I have it working is wrapping inside .sheet using isPresented.

Any help would be much appreciated

I think the component would feel a little more playful if we could drag the expanded bottom sheet to above its maxHeight, and on releasing the finger would use the spring animation to move back.

What do you think?

Kind of like this, except that it doesn't snap to the 'full screen' height:

One of the usecases we have for BottomSheet requires us to roll out a mini view and then follow the same interaction like Apple Music i.e:

• Tap the mini view to reveal the full player
• Swipe down to dock back into the miniview

FYI this may also be out of scope for this project.

PS Anomaly would be willing to sponsor the development of this feature.

Am having swift package manager issue. Whenever i try to add it with this link https://github.com/danielsaidi/BottomSheet.git It does not show up in swift package manager.

Secondly, when i add library manually, it shows could not find module 'Bottom Sheet' for target x86_64-apple-ios-simulator

when i try to add

import BottomSheet

Checked on internet, my device with xcode is with apple silicon m1 imac. Didnt try it on intel mac. But if it is able to add with swift package manager, that is great for me.

Hey 👋🏻

Just a simple styling issue, i'm looking to make backgroundColor dividerColor both transparent so behind the sheet but I want to keep the handle visible. At full opacity it looks like the properties do work but when set to 0 it looks like there's a base colour behind the sheet any ideas?

Fix for #2.

Putting a ScrollView in a bottom sheet caused the system to put the bottom of the content in the safe area, obscuring some content in many cases.

I guess that maybe specifying the padding(.bottom, geo.safeAreaInsets.bottom) to the content view could be the user's responsibility, because they might intend the view to bleed into the safe area. Maybe it should be an optional 'bleed' setting?

This library will be deprecated, due to the new SwiftUI 4 custom sheet size capabilities. Since this functionality will be added to SwiftUI, this library is no longer needed.

In SwiftUI 4, you can use the new presentationDetents view modifier to define custom sheet sizes. You can also make sheets non-dismissable, hide the resize handle, etc.

I get it, but to my knowledge it isn't possible to interact with the background and hide the scrim behind the sheet. If this is required, is this library still a good fit or am I missing something?

Hi @danielsaidi

Thank you for this fantastic library. I just had a question and wanted to ask here for future reference (and for SEO). How can I make sure that the bottomSheet is shown on top of the Tabbar?

I noticed now, that when I drag the sheet handle, the sheet moves less than my finger.

I have tried changing the drag gesture to use .onChange instead of .updating but the result is the same. It's as if the reported translation is incorrect and too small.

Updating .animation(.interactiveSpring()) with its boolean value .animation(.interactiveSpring(), value: isExpanded) the DragGesture of handle breaks the sheet.