SwiftUI: NavigationView Background Color – Extending into Safe Area

When trying to change the background color of my navigationView, I would change the background color of the UINavgiationBarAppearence in the App Delegate. But the issue with that solution is it would leave a white bar at the top of the screen on the safe area.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        UINavigationBar.appearance().backgroundColor = .systemPink

        return true
    }
iPhone - Before

This looks okay, but the white bar at the top just does not look right. The solution for this is the following.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithOpaqueBackground()
        coloredAppearance.backgroundColor = .systemPink
        coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]

        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance

        return true
    }
iPhone - After

This looks MUCH better. I hope this helps!

One thought on “SwiftUI: NavigationView Background Color – Extending into Safe Area

Leave a Reply

Your email address will not be published. Required fields are marked *