How can the background or the color in the navigation bar be changed?

Question

Currently I couldn't find any method to change the color/background of the navigation bar in SwiftUI. Any tips?

Answer 1

In order to change color of navigation bar for all view controllers, you have to set it in AppDelegate.swift file

Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift

var navigationBarAppearace = UINavigationBar.appearance()

navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)

In here tintColor attribute change the background color of the navigation bar.

barTintColor attribute affect to the color of the:

• back indicator image
• button titles
• button images

Bonus:

Change color of navigation bar title:

// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]

titleTextAttributes affect to the title text

I hope it helps. :)

Answer 2

Put a Rectangle behind your NavigationView inside a ZStack:

ZStack {
    Rectangle().foregroundColor(.red)
    NavigationView {
        ...
    }
}

Answer 3

In SwiftUI, at this point we can not change it directly, but you can change navigationBar appearance like this,

struct YourView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .orange

        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]

        //Use this if NavigationBarTitle is with displayMode = .inline
        //UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
    }

    var body: some View {
        NavigationView {
            Text("Hello World!")
              .navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
            //.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
        }
    }
}

I hope this will help you. Thanks!!

Answer 4

Till now there is no definitive API in SwiftUI for this purpose. But you can use the appearance API. Here is a sample code.

import SwiftUI

struct ContentView : View {
    init() {
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
        UINavigationBar.appearance().backgroundColor = .green
    }
    var body: some View {

        NavigationView {
            NavigationButton(destination: SecondPage(), label: {
                Text("Click")
            })
            .navigationBarTitle(Text("Title"), displayMode: .inline)
        }
    }
}

Answer 5

Please see this answer for a solution that does not use .appearance().

In short use UIViewControllerRepresentable

func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
    uiViewController.navigationController?.navigationBar...
}