How can I have two bottomSheets on top of each other?

[GerdC]

As an example take Apples Maps app, both on iPhone and iPad:

When started, the Apples Maps app shows a bottomSheet with a search field and more.

When tapping on an annotation, a second bottomSheet slides onto the top, at the same position.

I can change the position of the annotation bottomSheet, only the annotation bottomSheet is visible.

When I close the annotation bottomSheet, it slides down, leaving the main bottomSheet at its last position.

How do I control that, and which bottomSheet appears on top of which?

(If I can't control that 'on top' behaviour, I will dismiss one and then show the other, this behaviour is described in another discussion)

[GerdC]

Only partially solved:

A sequence of

  myView.
  .bottomSheet {
      // 1
  }
  .bottomSheet {
      // 2
  }

bottomSheet 2 is rendered on top of bottomSheet 1 and both are perfectly draggable, as long as the top of bottomSheet 1 is visible.

But I didn't manage to get the described behaviour of Apple Maps.

[lucaszischka]

Yes exactly, this is how you stack BottomSheet's.

I will answer the other questions briefly, but they seem to be basic data flow in SwiftUI issues, not related to this library:

• At launch only the BottomSheet // 1 is visible, but BottomSheet // 2 Position is .hidden
• At select make BottomSheet // 2 visible (and dismiss the other one) and pass the selected AnnotationModel to its View
• When a new selection is made, just update the AnnotationModel and the View of BottomSheet // 2 updates automatically (at least if you handle view updates correctly)
• Then, on deselect/close dismiss BottomSheet // 2 and set the previous position of the BottomSheet // 1 (eg. via caching it)