SwiftUI: Bottom sheet from the iPhone "find my" and "maps" app

Question

Created Aug ’22

Replies 10

Boosts 4

Views 4.5k

Participants 11

I would like to include the bottom sheet from the iPhone "find my" and "maps" app in my app. During my research I came across the new modifier .presentationDetents for sheets. The only problem here is that you can no longer interact with the main screen when the sheet is active. In my app, however, I would like the sheet to be active all the time like in the iPhone apps mentioned and that you can still interact with the main screen like in the iPhone apps with the map. I would be very happy about help. Greetings

Answered by BabyJ in 722857022

This is currently a limitation with the new API. I have already filed feedback and I suggest you do too.

Boost

Answer 1

BabyJ OP

Aug ’22

Accepted Answer

This is currently a limitation with the new API. I have already filed feedback and I suggest you do too.

2

Answer 2

O_321 OP

Nov ’22

can you solved 2nd image design code in swiftui? if it done, kindly share the design code I am stuck on it,how to display bottom sheet behind my Bottom toolbar items. (https://developer.apple.com/forums/thread/719893)

0

Answer 3

Bestage77 OP

Dec ’22

I would be interested to find out how you worked around this for the time being? Another issue apart from interactivity I am observing is that you cannot place the sheet using .presentationDetents behind the TabView's tabItem - in my tests it is always place above the whole tabView's tabbar so I cannot replicate the design used in Maps or Find My apps...

1

Answer 4

RamPratap001 OP

Jun ’23

Did you get any solution??

0

Answer 5

BabyJ OP

Jun ’23

With iOS 16.4 you now can by using the new presentationBackgroundInteraction(_:) modifier.

For your case you can apply this to your presented view:

.presentationBackgroundInteraction(.enabled)

0

Answer 6

alvaroCodr OP

Jul ’23

.presentationBackgroundInteraction(.enabled) worked for my case. Basically the mapView is interactive while a modal or BottomSheet is visible

0

Answer 7

santicarmo31 OP

Jan ’24

If you are using a TabBar and want to present the sheet behind the tab bar item using detents you can not do it. The sheet is always presented in front of the tab bar items hiding them

0

Answer 8

AbdallahAlnsour OP

May ’24

I did everything I can to make the sheet appear from behind of the tab bar. one package I used and it was really awesome that did the job

https://github.com/lucaszischka/BottomSheet/tree/main#BottomSheetPosition

0

Answer 9

Asdepyk69 OP

Jun ’24

the solution: https://www.youtube.com/watch?v=8Ys83qvnDvE

0

Answer 10

wojciechkonury OP

Oct ’24

I've created small package for this use case because SwiftUI .sheet will overlay on bottom TabView.

https://github.com/wojtek717/bottom-sheet

0