Why does this simple SwiftUI view modifier with transition produce a crash? - swiftui

Question

I wrote this very simple .modal View modifier in SwiftUI.
When it is opened, I press close and before the transition finished open again, I get the following crash:
Gesture: Failed to receive system gesture state notification before next touch
Sample code:
import SwiftUI
struct ContentView: View {
#State var show = false
var body: some View {
VStack {
Button("Open") {
withAnimation {
self.show.toggle()
}
}.disabled(self.show) // doesn't help
}.modal(isShowing: self.$show) {
Button("Close") {
withAnimation {
self.show.toggle()
}
}
}
}
}
extension View {
func modal<C>(isShowing: Binding<Bool>, #ViewBuilder content: #escaping () -> C) -> some View where C: View {
self.modifier(ModalView(isShowing: isShowing, content: content))
}
}
struct ModalView<C>: ViewModifier where C: View {
#Binding var isShowing: Bool
let content: () -> C
func body(content: Content) -> some View {
ZStack {
content.zIndex(0)
if self.isShowing {
self.content()
.background(Color.primary.colorInvert())
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.transition(.move(edge: .bottom))
.zIndex(1)
}
}
}
}
Can someone explain how I can prevent this? It seems that the Bool responsible for toggling is set before the animation has finished. Is this by design?

Answer 1

Yes, you need to disable below content (as you introduce modality) but in a bit different place
Here is fixed variant. Tested with Xcode 12 / iOS 14
struct ModalView<C>: ViewModifier where C: View {
#Binding var isShowing: Bool
let content: () -> C
#State private var interactive: Bool // track state
init(isShowing: Binding<Bool>, #ViewBuilder content: #escaping () -> C) {
self._isShowing = isShowing
self._interactive = State(initialValue: !isShowing.wrappedValue)
self.content = content
}
func body(content: Content) -> some View {
ZStack {
content.zIndex(0).disabled(!interactive) // disable here !!
if self.isShowing {
self.content()
.background(Color.primary.colorInvert())
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.transition(.move(edge: .bottom))
.zIndex(1)
.onAppear { self.interactive = false } // << !!
.onDisappear { self.interactive = true } // << !!
}
}
}
}