How to make a semi-transparent Navigation Bar in SwiftUI?

Question

I've seen several posts discussing how to make a transparent Navbar in SwiftUI, but none on how to make a semi-transparent one, which is surprising to me as its a very common patter on Apple's default apps. For example the Notes app:

You can see the drawing through the NavBar. Anyone know how to do this, ideally in a way which works in light/dark mode?

Answer 1

Maybe you just need to add translucency settings in your SwiftUI view

init() {
  UINavigationBar.appearance().isTranslucent = true
}

alternate is to reset appearance completely, like

init() {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    appearance.backgroundColor = UIColor.systemBackground.withAlphaComponent(0.5)
    UINavigationBar.appearance().standardAppearance = appearance
}

Demo prepared and tested with Xcode 12 / iOS 14

backup