SwiftUI: How can i change navigation bar style dynamic using custom modifier?

Question

I want to customize my navigation bar in SwiftUI. For that, i created a custom modifier, to set the backgroundColor and textColor and hide the 1px bottom line. The modifier looks something like this:

struct NavigationBarColor: ViewModifier {
    init(backgroundColor: UIColor, tintColor: UIColor, lineHidden: Bool) {
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithOpaqueBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: tintColor]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: tintColor]
        
        if lineHidden == true {
            coloredAppearance.shadowImage = UIImage()
            coloredAppearance.shadowColor = UIColor.clear
            coloredAppearance.backgroundImage = UIImage()
        }
        
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().tintColor = tintColor
    }
    
    func body(content: Content) -> some View {
        content
    }
}

extension View {
    func navigationBarColor(backgroundColor: UIColor, tintColor: UIColor, lineHidden: Bool = false) -> some View {
        self.modifier(NavigationBarColor(backgroundColor: backgroundColor, tintColor: tintColor, lineHidden: lineHidden))
    }
}

I use it on my ContentView() like this:

var body: some View {
        NavigationView {
            NavigationLink(destination: EventDetailView()) {
                Text("Go to Detail Page")
            }
            .navigationTitle("Master")
            .navigationBarColor(backgroundColor: .secondarySystemBackground, tintColor: .black, lineHidden: true)
        }
    }

It works as i expected, but when i set the modifier different on my detailView, the navigationBarAppearance is not updated. My DetailView looks like this:

var body: some View {
        Text("Details")
            .navigationTitle("Detail Page")
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarColor(backgroundColor: .systemRed, tintColor: .white, lineHidden: true)
    }

What can I change so that the style of the navigation bar changes when I go to the details page? Everhting an idea?

Answer 1

Use this which is a little different than your solution.

struct NavigationBarModifier: ViewModifier {
    
    var backgroundColor: UIColor?
    
    init(backgroundColor: UIColor, tintColor: UIColor, lineHidden: Bool) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = .clear
        coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        
        if lineHidden == true {
            coloredAppearance.shadowImage = UIImage()
            coloredAppearance.shadowColor = UIColor.clear
            coloredAppearance.backgroundImage = UIImage()
        }
        
        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, tintColor: UIColor, lineHidden: Bool) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor, tintColor: tintColor, lineHidden: lineHidden))
    }
    
}

You may change the appears of the navigation bars.

---

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