Animation goes into background view instead of foreground - ios

Question

I have the following:
struct SettingsView: View {
#State private var showSuccessSave: Bool = false
var body: some View {
NavigationView {
ScrollView {
VStack {
SuccessNotificationView()
.offset(y: self.showSuccessSave ? -UIScreen.main.bounds.height/9 : -UIScreen.main.bounds.height)
.animation(
.interactiveSpring(
response: 0.8,
dampingFraction: 0.8,
blendDuration: 1
)
)
.onTapGesture {
self.showSuccessSave = false
}
Button(action: {
self.showSuccessSave.toggle()
}) {
Text("Save")
}
}
}
.navigationBarTitle("Settings")
}
}
}
And the function I call:
struct SuccessNotificationView: View {
var body: some View {
Text("Success")
.padding()
.foregroundColor(Color.white)
.frame(width: UIScreen.main.bounds.width, height: 100)
.background(Color.green)
.cornerRadius(20)
}
}
When it pops up, look at the settings text:
How do I make that notification be on the foreground covering the Settings text? Right now it displays everything in that view on top of it.

Answer 1

Here is possible approach. Tested with Xcode 11.4 / iOS 13.4
struct SettingsView: View {
#State private var showSuccessSave: Bool = false
var body: some View {
ZStack(alignment: .top) {
NavigationView {
ScrollView {
VStack {
Button(action: {
self.showSuccessSave.toggle()
}) {
Text("Save")
}
}
}
.navigationBarTitle("Settings")
}
SuccessNotificationView()
.offset(y: self.showSuccessSave ? 0 : -UIScreen.main.bounds.height)
.animation(
.interactiveSpring(
response: 0.8,
dampingFraction: 0.8,
blendDuration: 1
)
)
.onTapGesture {
self.showSuccessSave = false
}
}
}
}