How to change height of NavigationBar

Question

My NavigationBar has gone large. How do you control the height in SwiftUI?

The relevant code is:

 .navigationBarBackButtonHidden(false)
 .navigationBarTitle("Sunrise Sunset", displayMode: .inline)
 .navigationBarColor(backgroundColor: .gray, titleColor: .white)

There seems to be a similar question on this topic but I couldn't get it to work: (SwiftUI) NavigationBar height issue

The .navigationBarColor struct comes from 56505528.

// https://stackoverflow.com/questions/56505528/swiftui-update-navigation-bar-title-color

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?
    var titleColor: UIColor?
    init(backgroundColor: UIColor?, titleColor: UIColor?) {
        self.backgroundColor = backgroundColor
        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = backgroundColor
        coloredAppearance.titleTextAttributes = [.foregroundColor: titleColor ?? .white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: titleColor ?? .white]
        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
    }

    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?, titleColor: UIColor?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: backgroundColor, titleColor: titleColor))
    }
}

score 0 · Answer 1 · answered Feb 03 '23 at 08:51

The NavigationStack! If you have a complex View and your NavigationBar has oversized it can mean that your structures aren't contained/paired correctly.

I changed "NavigationStack" to a "VStack" just to see if the page rendered OK and the NavigationBar went back to its normal, thin size.

Try this if you're having the same issue.

How to change height of NavigationBar

1 Answers1