Transparent navigationbar in SwiftUI with backgroundImage - ios

Question

I have a custom navigation bar that is the an image followed by the header text. The image is set to scale to fill but does not quite fill up the navigation bar. As such, you can see a little of the bar where the image does not cover. I've tried to set the background color of the nav bar to clear but that doesn't work. Any suggestions?
struct ContentView: View {
#State private var hideBar = true
var body: some View {
VStack {
NavigationView {
ZStack {
Image("bg5").resizable().scaledToFill()
VStack {
NavigationLink(destination:
SubView(header: "Go to subview")) {
Text("Go to subview")
}.simultaneousGesture(TapGesture().onEnded {
self.hideBar = false // << show, here to be smooth !!
})
NavigationLink(destination:
SubView(header: "Go again")) {
Text("Go to subview again")
}.simultaneousGesture(TapGesture().onEnded {
self.hideBar = false // << show, here to be smooth !!
})
}
.navigationBarTitle("")
.navigationBarHidden(hideBar)
.onAppear {
self.hideBar = true // << hide on back
}
}.edgesIgnoringSafeArea([.top, .bottom])
}
}
}
}
struct SubView: View {
var header: String
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var btnBack : some View { Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
HStack {
Image("subheaderback").resizable().scaledToFit()
VStack(alignment: .center) {
Text(self.header)
}.frame(width: 100, height: 100)
}
}.buttonStyle(PlainButtonStyle())
}
var body: some View {
ZStack {
Image("bg5").resizable().scaledToFill()
VStack {
Text("blah blah")
Text("and more blah")
}
}.edgesIgnoringSafeArea([.top, .bottom])
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: btnBack)
}
}
extension UINavigationController {
override open func viewDidLoad() {
super.viewDidLoad()
let appearance = UINavigationBarAppearance()
appearance.backgroundColor = .clear
appearance.backgroundImage = UIImage(named: "subheader")
navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance
}
}

Answer 1

Instead of setting background color you need different configuration, like below (tested with Xcode 11.4 / iOS 13.4)
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground() // << this one !!
appearance.backgroundImage = UIImage(named: "subheader")
// appearance.backgroundImageContentMode = .scaleAspectFit // if needed non-default