In iOS 15, we can use UISheetPresentationController to show bottom sheet like native Maps app. But before that there's no such built in bottom sheet in UIKit or SwiftUI.
We can start defining API for it. There are 3 ways to show overlay content in SwiftUI
fullScreenCover: this presents like a modal view controller bottom up
offset: initially hide our bottom sheet
overlay: show overlay full screen so we can have custom control. This is the approach I usually use.
The bottom sheet contains a handle followed by its content. We use @ViewBuilder to let user provide custom content.
Here I use normal State instead of @GestureState in order to present our bottom sheet content up initially.
I also use a bottom patch to make an elastic effect when our sheet is dragged up.
Note also that we use .animation with value parameter to let animation kicks it when the value changes
In iOS 15, we can use
UISheetPresentationController
to show bottom sheet like native Maps app. But before that there's no such built in bottom sheet in UIKit or SwiftUI.We can start defining API for it. There are 3 ways to show overlay content in SwiftUI
so we can use like
The bottom sheet contains a handle followed by its content. We use
@ViewBuilder
to let user provide custom content.Here I use normal
State
instead of@GestureState
in order to present our bottom sheet content up initially. I also use a bottom patch to make an elastic effect when our sheet is dragged up. Note also that we use.animation
withvalue
parameter to let animation kicks it when the value changesThe result looks like this
https://user-images.githubusercontent.com/2284279/128351510-432491c7-11a1-408a-b374-1d147ba3d5b5.mp4
Read more