How to replace .sheet with another one? - swiftui

Question

I have a view
struct Services: View {
#State private var isFirstSheetOpen = false
#State private var isSecondSheetOpen = false
var body: some View {
Button("Open sheet") {
isFirstSheetOpen.toggle() // turns true
}.sheet(isPresented: $isFirstSheetOpen) {
Button("Open second sheet") {
isFirstSheetOpen.toggle() // turns false
isFirstSecondOpen.toggle() // turns true
}.sheet(isPresented: $isSecondSheetOpen) {
Text("Second sheet")
}
}
}
}
I want to achieve something like Telegram has.
When opening the second sheet the first one should close (with animation).
https://s4.gifyu.com/images/IMG_8720.gif
I have two problems with my code.
If I put sheets nested (like in the example above) it closes the first one, then again opens it, even before opening the second sheet.
If I put sheets like this
// cut
Button() {
}.shet() { /*...*/ }
.shet() { /*...*/ }
// cut
It replaces the sheets immediately. If I wrap it inside
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
isSecondSheetOpen = true
}
animation takes too long (event with a small delay).
Could you help me to achieve exactly the same animation as shown in Gif?

Answer 1

You can use sheet(item:) instead of isPresented, which will close a previous sheet and open a new one when the item changes:
struct SheetContent: Identifiable, Hashable {
var id = UUID()
var text: String
}
struct ContentView: View {
#State var content: [SheetContent] = [.init(text: "1"), .init(text: "2"), .init(text: "3")]
#State var presented: SheetContent?
var body: some View {
Button("Open") {
presented = content.first
}
.sheet(item: $presented) { item in
Text(item.text)
Button("New sheet") {
presented = content.filter { $0.id != presented?.id }.randomElement()
}
}
}
}