BottomSheetView in SwiftUI https://swiftwithmajid.com/2019/12/11/building-bottom-sheet-in-swiftui/

BottomSheetView.swift

//
//  BottomSheetView.swift
//
//  Created by Majid Jabrayilov
//  Copyright © 2019 Majid Jabrayilov. All rights reserved.
//
import SwiftUI

fileprivate enum Constants {
    static let radius: CGFloat = 16
    static let indicatorHeight: CGFloat = 6
    static let indicatorWidth: CGFloat = 60
    static let snapRatio: CGFloat = 0.25
    static let minHeightRatio: CGFloat = 0.3
}

struct BottomSheetView<Content: View>: View {
    @Binding var isOpen: Bool

    let maxHeight: CGFloat
    let minHeight: CGFloat
    let content: Content

    @GestureState private var translation: CGFloat = 0

    private var offset: CGFloat {
        isOpen ? 0 : maxHeight - minHeight
    }

    private var indicator: some View {
        RoundedRectangle(cornerRadius: Constants.radius)
            .fill(Color.secondary)
            .frame(
                width: Constants.indicatorWidth,
                height: Constants.indicatorHeight
        ).onTapGesture {
            self.isOpen.toggle()
        }
    }

    init(isOpen: Binding<Bool>, maxHeight: CGFloat, @ViewBuilder content: () -> Content) {
        self.minHeight = maxHeight * Constants.minHeightRatio
        self.maxHeight = maxHeight
        self.content = content()
        self._isOpen = isOpen
    }

    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 0) {
                self.indicator.padding()
                self.content
            }
            .frame(width: geometry.size.width, height: self.maxHeight, alignment: .top)
            .background(Color(.secondarySystemBackground))
            .cornerRadius(Constants.radius)
            .frame(height: geometry.size.height, alignment: .bottom)
            .offset(y: max(self.offset + self.translation, 0))
            .animation(.interactiveSpring())
            .gesture(
                DragGesture().updating(self.$translation) { value, state, _ in
                    state = value.translation.height
                }.onEnded { value in
                    let snapDistance = self.maxHeight * Constants.snapRatio
                    guard abs(value.translation.height) > snapDistance else {
                        return
                    }
                    self.isOpen = value.translation.height < 0
                }
            )
        }
    }
}

struct BottomSheetView_Previews: PreviewProvider {
    static var previews: some View {
        BottomSheetView(isOpen: .constant(false), maxHeight: 600) {
            Rectangle().fill(Color.red)
        }.edgesIgnoringSafeArea(.all)
    }
}

Thank you so much for sharing this Majid. I have used it on a little App that is the last Project (Day 99) as part of Paul Hudsons 100 Days of SwiftUI. it works an absolute treat though I made a a couple of changes to customise it for my needs.

When I call this from a Button the below the result. The blank screen is a sheet with your sheet inside. This is not the expected.

.sheet(isPresented: self.$showingActionsheet) {
BottomSheetView(
isOpen: self.$showingActionsheet,
maxHeight: geo.size.height * 0.7
) {
Rectangle().fill(Color.red)
}.edgesIgnoringSafeArea(.all)

@JasonGreenAmerica you don't need to use .sheet to present BottomSheet.

It’s this just hidden view?

…

________________________________ From: Majid Jabrayilov <notifications@github.com> Sent: Tuesday, April 28, 2020 7:49:44 AM To: mecid <mecid@noreply.github.com> Cc: Green America Technology <jason.amos@greenamericatechnology.com>; Mention <mention@noreply.github.com> Subject: Re: mecid/BottomSheetView.swift @mecid commented on this gist.

________________________________ @JasonGreenAmerica<https://github.com/JasonGreenAmerica> you don't need to use .sheet to present BottomSheet. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://gist.github.com/78eab34d05498d6c60ae0f162bfd81ee#gistcomment-3273274>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADKS446Y7P3X7L6PPRZAV7LRO3UIRANCNFSM4KBZ5Z3Q>.

@JasonGreenAmerica take a look at my post, there is the usage example in the end.
https://swiftwithmajid.com/2019/12/11/building-bottom-sheet-in-swiftui/

Hey @mecid, love this gist. Thanks so much for sharing this. In my use cases, the implicit animation dictates all views with explicit animation on the sheet. So I updated it to use explicit animation. I really wanted to contribute to this gist. But looks like I can't so I've forked and modified it here https://gist.github.com/landtanin/dc8bc52f77345fd078deb64f91393008. Just want to let you know and sort of contribute back. Thanks again!

@landtanin Thanks for your contribution 🙏🏻

@mecid Thank you so much for making this gist available!

But when I put a Slider inside the BottomSheetView, the slider control would interact with the drag state of the BottomSheetView. Really appreciate it if you could point me in the right direction of solving this problem!

Hi, I can't figure out how to add content to the slide. From the looks of it, I need to give 'content' a body as 'content' has restrains to only show content on the slide.

Nevermind, think I've worked it out. I've basically made another var like indicator which'll have my custom view in it.

@mxgc I'm not sure there is a way to control it for now.

@mxgc I was able to get it working with a Slider. Basically we need to track isSliding state in our vm. So the BottomSheet initializer will look something like this depending on your adaptation:
init(isOpen: Binding<Bool>, @ViewBuilder content: () -> Content, isSliding: Binding<Bool> = .constant(false)). Whenever the sheet content contains a slider we need to pass in isSliding. Slider has an onEditingChanged which we can use like this: self.vm.isSliding = $0. Then in bottom sheet, we can have:

func dragMask() -> GestureMask { if !isOpen { return .subviews } if isOpen && isSliding { return .none } return .all } .... let drag = DragGesture(minimumDistance: 10) .... .gesture(drag, including: dragMask())
/// Note: Don't forget the minimum distance, 10 seems to be enough, but without it, the slider won't even get a chance to start.

How to open bottom sheet on button click?

@javariahazoor toggle your isOpen boolean.

Could you provide an example of how to toggle isOpen Boolen from another swift file?

@javariahazoor How u success to make it?

@matarali since it is a binding you simply change the property. If it needs to be changed in another file then likely the property will be inside an ObservableObject.

Fantastic! Thank you.

How do I inset the main content view to counteract edgesIgnoringSafeArea? I tried adding padding based on the geometry data:

var body: some View {
    GeometryReader { geometry in
        VStack {
            Button(action: { bottomSheetShown.toggle() }, label: {
                Text("\(bottomSheetShown ? "Close" : "Open") Sheet")
            })
            .padding()
            Button(action: { hideSheet.toggle() }, label: {
                Text("\(hideSheet ? "Unhide" : "Hide") Sheet")
            })
            .padding()
        }
        .padding(.top, geometry.safeAreaInsets.top)
        .padding(.leading, geometry.safeAreaInsets.leading)
        .padding(.trailing, geometry.safeAreaInsets.trailing)
        .background(Color.green)
        if !hideSheet {
            BottomSheetView(
                isOpen: self.$bottomSheetShown,
                maxHeight: geometry.size.height * 0.7
            ) {
                Color.blue
            }
        }
    }.edgesIgnoringSafeArea(.all)
}

I solved this. I wrapped an extra GeometryReader (ugh?) and used its safeAreaInsets for the main content padding. The inner GeometryReader seems to mainly serve the purpose of being a greedy view to use up all the available space, and it ignores the safe area.

So: GR1 reads the safe area. GR2 Ignores the safe area. VStack{}.padding(geometry.safeAreaInsets) re-honors the GR1 safe area.

GeometryReader { geometry in
    GeometryReader { _ in
        VStack {
                // Your main content here [...]
        }
        .padding(geometry.safeAreaInsets)
        BottomSheetView1(
            isOpen: self.$bottomSheetShown,
            maxHeight: geometry.size.height * 0.7
        ) {
            // Your partial sheet content here [...]
        }
    }
    .edgesIgnoringSafeArea(.all)
    .background(Color.green)
}

@mecid The code for bottom sheet does not behave as apple maps sheet i.e. On first snap(swipe up) opens up on half the screen height and cover full screen on second snap based on max height. Can you suggest if i am missing anything ?