ignoresSafeArea not covering bottom of View

Question

I'm trying to create the background for a background view for a popup, however the view doesn't cover the bottom even after I use .ignoreSafeArea().

import SwiftUI

struct Overlay<Content: View>: View {

    @State var opacity: Double = 0
    var content: Content

    var body: some View {
        VStack {
            Color.black.opacity(opacity).ignoresSafeArea()
            content
        }
        .onAppear { self.opacity = 0.5 }
        .onDisappear { self.opacity = 0 }
    }
}

struct ForgotPasswordView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            Overlay(content: Text(""))
                .previewDevice("iPhone 12")
        }
    }
}

Answer 1

VStack arranges its children in a vertical line.

What You see in the bottom area is your content which you pass in the view creation (here its your TextView).

struct Overlay<Content: View>: View {

    @State var opacity: Double = 0
    var content: Content

    var body: some View {
        ZStack { //<- here
            Color.black.opacity(opacity).ignoresSafeArea()
            content
        }
        .onAppear { self.opacity = 0.5 }
        .onDisappear { self.opacity = 0 }
    }
}