Updating the UINavigationBar color only applies a tint, not sure why?

Question

So....I have a lot of code, and in an initialization of a view, I change the UINavigationBar:

struct ContentView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .black
    }
    var body: some View {
        NavigationView {
            VStack {
                Text("Test")
            }.navigationBarTitle("TestBarTitle", displayMode: .inline)
        }
    }
}

For some reason, this only makes the bar appear gray (almost like it's applying a transparent black filter). I am not sure but I think there must be some code that is messing up this navigation bar change. What might have possibly caused this? I'd like the navBar to literally be black.

Side Note: When I remove displayMode: .inline, the navBar appears as a solid color instead of transparent...how do I maintain the navBar setup in the way that displayMode: .inline provides though?

Answer 1

We can create a custom modifier called ".navigationBarColor()" and use it like so:

struct ContentView: View {

  var body: some View {
    NavigationView {
      VStack {
        Text("Test")
      }
      .navigationBarTitle("TestBarTitle", displayMode: .inline)
      .navigationBarColor(.black)

    }
  }
}

Add this to your ContentView file:

struct NavigationBarModifier: ViewModifier {

  var backgroundColor: UIColor?

  init( backgroundColor: UIColor?) {
    self.backgroundColor = backgroundColor
    let coloredAppearance = UINavigationBarAppearance()
    coloredAppearance.configureWithTransparentBackground()
    coloredAppearance.backgroundColor = .clear
    coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
    coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]

    UINavigationBar.appearance().standardAppearance = coloredAppearance
    UINavigationBar.appearance().compactAppearance = coloredAppearance
    UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    UINavigationBar.appearance().tintColor = .white

  }

  func body(content: Content) -> some View {
    ZStack{
      content
      VStack {
        GeometryReader { geometry in
          Color(self.backgroundColor ?? .clear)
            .frame(height: geometry.safeAreaInsets.top)
            .edgesIgnoringSafeArea(.top)
          Spacer()
        }
      }
    }
  }
}

extension View {

  func navigationBarColor(_ backgroundColor: UIColor?) -> some View {
    self.modifier(NavigationBarModifier(backgroundColor: backgroundColor))
  }

}

---

Check out this article which was posted on March 10, 2020.

https://filipmolcik.com/navigationview-dynamic-background-color-in-swiftui/