SwiftUI: ScrollView that drags bottom sheet with it

Question

I'm trying to create a SwiftUI Scrollview that drags its container like this: https://drive.google.com/file/d/1O92DgsVI1OjM1HEUXUwVywB8gcdShOP-/view?usp=sharing

Many Apple apps use this (Apple Maps, Music, Wallet, etc) but I haven't found an easy way to do it wit SwiftUI. What do you think is the best way to implement this simply?

I've looked at most libraries here https://github.com/search?q=swiftui+drawer but none of them implements their drawer with a ScrollView in it that can drag the view.

I also tried implementing a custom UIScrollView as UIViewRepresentable and I tried to tweak the scrollViewWillBeginDragging() but I could not make it work.

I'm facing the exact same problem, did you manage to find a solution? — Bruno Fulber Wide, Feb 16 '22 at 20:39

score 2 · Answer 1 · answered Feb 17 '22 at 22:32

Ok, I ran into this problem while developing a drawer package myself, and I believe I was able to solve it using the legacy UIscrollView and a UIViewRepresentable wrapper.

if you want to use the packages you already had before, here's I ended up doing:

inside my Drawer, I've added this LegacyScrollView wrapper.

    LegacyScrollView(.vertical, showsIndicators: showsIndicators) {
        content
    }
    .onDragShouldBegin { pan, scrollView in
        /// touch shouldn't begin when scrolling past zero content offset
        scrollView.contentOffset.y - pan.translation(in: scrollView).y > 0
    }

with this wrapper I'm able to access UIScrollView's gestureRecognizerShouldBegin(_:) and override it through a SwiftUI modifier

Result

score 1 · Answer 2 · edited Oct 20 '21 at 03:54

1

Following is used to apply throughout the application

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    UIScrollView.appearance().bounces = false
}

edited Oct 20 '21 at 03:54

UditS

1,936
17
37

answered Oct 19 '21 at 16:00

Virat

45
1
8

I am looking for a solution for a SwiftUI ScrollView, not a UIScrollView. – blrsk Oct 19 '21 at 16:06
@blrsk Please go through this answer https://stackoverflow.com/questions/58799474/how-to-disable-scrollview-bounce-in-swiftui – Protocol Oct 19 '21 at 16:13
Above code also work. but this is for throughout the app. – Protocol Oct 19 '21 at 16:24
This does not work for me – blrsk Oct 19 '21 at 16:24

score 1 · Answer 3 · edited Oct 21 '21 at 13:13

1

I've ran into the same issue and came across the FloatingPanel package. The repo includes an example to apply it to SwiftUI apps.

edited Oct 21 '21 at 13:13

mrcendre

1,053
2
15
28

answered Oct 20 '21 at 13:07

Andrew Mejia

11
1

Thanks for sharing! It looks promising. I'll take a look. – blrsk Oct 21 '21 at 11:29

Eugene Dudnyk · Answer 4 · 2021-10-20T21:43:33.670

0

Check the SheeKit library where that behaviour is supported for native sheets.

You can read about the implementation in this story on medium. Also, you can find the demo video in the end of the story.

In case if you need an advanced native SwiftUI scroll view with the support of content offset tracking and other UIKit-like configurability, check the SolidScroll library and the story behind it.

edited Oct 20 '21 at 21:43

answered Oct 20 '21 at 21:38

Eugene Dudnyk

5,553
1
23
48

Thanks for sharing! It looks promising. I'll take a look. – blrsk Oct 21 '21 at 11:29

score -1 · Answer 5 · edited Apr 19 '22 at 01:32

-1

struct ContentView: View {
    init() {
        UIScrollView.appearance().bounces = false
    }
    var body: some View {
        ZStack {
            DraggableView()
            ScrollView {
                LazyVStack {
                    Text("Hello World")
                }
            }
        }
    }
}

edited Apr 19 '22 at 01:32

pkamb

33,281
23
160
191

answered Oct 19 '21 at 16:22

Protocol

1,696
13
30

This does not work for me – blrsk Oct 19 '21 at 16:24
Above code is working at my end. I think there is issue in DraggableView(). Please comment that code as of now and then check. – Protocol Oct 19 '21 at 16:29
I updated the question with the whole file. – blrsk Oct 19 '21 at 16:48
Thank you for taking the time to answer! Would be nice with an explanation of your answer and not just code. – softarn Oct 20 '21 at 06:25
This does not work. There is no valid answer yet – blrsk Oct 20 '21 at 11:52

SwiftUI: ScrollView that drags bottom sheet with it

5 Answers5

Linked