SwiftUI white space under the NavigationBar - swift

Question

I have a view with a NavigationBar with a large title and content inside. I've changed the content background color and the NavigationBar background color.
var body: some View {
NavigationView {
VStack {
//content
}.background(Color.green)
.edgesIgnoringSafeArea(.bottom) //to fill the white space at the bottom
.navigationBarTitle("Wallets")
}
}
extension UINavigationController {
override open func viewDidLoad() {
super.viewDidLoad()
let standartAppearance = UINavigationBarAppearance()
standartAppearance.backgroundColor = UIColor.green
navigationBar.standardAppearance = standartAppearance
navigationBar.scrollEdgeAppearance = standartAppearance
navigationBar.compactAppearance = standartAppearance
}
}
And now if I move to the next view using the NavigationLink, and this view has a title with .inline display mode (different NavigationBar size), in the moment of the transition I see the white space under the first Navigation bar. I can fill it if I make .edgesIgnoringSafeArea(.all) for my VStack, but in this case all my content jump under the NavigationBar. How can I color the space under the NavigationBar to custom color?

Answer 1

Looks like it's a bug. I didn't find the normal solution. Here is a workaround:
We should calculate the NavigationBar heigh and fill the space behind it.
var deviceHeight: CGFloat {
UIScreen.main.bounds.height
}
func calcPadding() -> CGFloat {
var padding: CGFloat = 0.0
switch self.deviceHeight {
case 568.0: padding = 94.0 + 6.0
case 667.0: padding = 96.0 + 10.0
case 736.0: padding = 96.0 + 10.0
case 812.0: padding = 106.0 + 10.0
case 896.0: padding = 106.0 + 10.0
default:
padding = 106.0
}
return padding
}
var body: some View {
NavigationView {
VStack {
VStack {
//content
}
.padding(.top, calcPadding())
.background(Color.myBackground)
}
.background(Color.myBackground)
.edgesIgnoringSafeArea(.all)
}
}