swiftuinavigationswiftui-navigationview

How to extend Navigation View to show beyond safe area in swiftUI

I am trying to use NavigationView and created custom NavigationModifier: but the navigation bar has some white space at top , i want to cover it all with navigation bar it self.

i tried adding ignoreSafeArea didn't got the result.

Here is my code:

struct HomeScreen: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 10) {
                Text("Hello:Home")
                    .modifier(NavModifier())
            }
        }
    }
}

Modifier:

struct NavModifier : ViewModifier {
        
    init() {
        let color = UIColor(Color.appTheme)
        UINavigationBar.appearance().backgroundColor = color
     }
    
    func body(content: Content) -> some View {
        return content
            .navigationBarTitleDisplayMode(.inline)
            .ignoresSafeArea(edges: .top)
            .toolbar {
                ToolbarItem(placement: .principal) {
                                        Image(systemName: "person")
                                    }
            }
    }
}

and result screen:

enter image description here

Solution

  • We need to replace appearance completely, like

    struct NavModifier : ViewModifier {

    init() {
       let navBarAppearance = UINavigationBarAppearance()
       navBarAppearance.configureWithOpaqueBackground()
       navBarAppearance.backgroundColor = UIColor.yellow     // << for test !!

       UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
     }
// ...
}

    Tested with Xcode 13.4 / iOS 15.5

    demo