Creating a custom alertSheet in SwiftUI - ios

Question

Swift 5.x iOS 13/14
Trying to build a custom action sheet and mystified as to why this slides from the left and then up when I am telling it to simply slide from the bottom or at least I thought that was what I was asking.
import SwiftUI
struct ContentView: View {
#State private var showingCustomSheet = false
var body: some View {
ZStack {
Button(action: {
self.showingCustomSheet.toggle()
}) {
Text("Fire")
.font(.largeTitle)
.foregroundColor(Color.red)
}
if showingCustomSheet {
CustomAlertSheet(showingCustomSheet: $showingCustomSheet)
}
}
}
}
struct CustomAlertSheet: View {
#Binding var showingCustomSheet: Bool
#State var showEscape = false
var body: some View {
VStack {
Spacer().onAppear {
withAnimation(.linear(duration: 2)) {
showEscape.toggle()
}
}
if showEscape {
Rectangle()
.fill(Color.red)
.frame(width: 256, height: 128)
.transition(.move(edge: .bottom))
.animation(.default)
}
}
}
}

Answer 1

Here is a solution - removed redundant things and some small fixes... Tested with Xcode 12 / iOS 14.
struct ContentView: View {
#State private var showingCustomSheet = false
var body: some View {
ZStack {
Button(action: {
self.showingCustomSheet.toggle()
}) {
Text("Fire")
.font(.largeTitle)
.foregroundColor(Color.red)
}
CustomAlertSheet(showingCustomSheet: $showingCustomSheet)
}
}
}
struct CustomAlertSheet: View {
#Binding var showingCustomSheet: Bool
var body: some View {
VStack {
Spacer()
if showingCustomSheet {
Rectangle()
.fill(Color.red)
.frame(width: 256, height: 128)
.transition(.move(edge: .bottom))
}
}
.animation(.default, value: showingCustomSheet)
}
}