iOS 15 Navigation Bar Transparent

Question

My iOS app uses the storyboard for the UI and uses a custom tint for the background color of the navigation bar.

I have tested my app on the Xcode 13 beta 5 and the navigation bar is "white" and the text on the navigation bar is not visible.

In the apple developer forum at https://developer.apple.com/forums/thread/682420 it states that "In iOS 15, UIKit has extended the usage of the scrollEdgeAppearance, which by default produces a transparent background, to all navigation bars." To restore the old look, you must adopt the new UINavigationBar appearance APIs

I added the following code (from the link above) to the App Delegate "application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions":

        if #available(iOS 13, *) {
            let navigationController = UINavigationController(navigationBarClass: nil, toolbarClass: nil)
            let navigationBar = navigationController.navigationBar
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)
            navigationBar.standardAppearance = appearance;
            navigationBar.scrollEdgeAppearance = navigationBar.standardAppearance
            navigationBar.isTranslucent = false
        }

This does not fix the problem. I still have the custom tint set in the storyboard editor for the navigation bar. Do I need to remove the custom tint or am I implementing the appearance API wrong?

You are creating a new instance of UINavigationController in your code snippet. What are you doing with this instance? Just a wild guess: I think you are looking for something like UINavigationBar.appearance() but I am not familiar with the new iOS 15 APIs to be honest. — Teetz

G. Steve G. Steve · Accepted Answer · 2021-09-09T19:50:54

There is no need to change anything in the storyboard. Here is the solution that finally worked when added to the App Delegate application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions:

//Fix Nav Bar tint issue in iOS 15.0 or later - is transparent w/o code below
if #available(iOS 15, *) {
    let appearance = UINavigationBarAppearance()
    let navigationBar = UINavigationBar()
    appearance.configureWithOpaqueBackground()
    appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
    appearance.backgroundColor = UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)
    navigationBar.standardAppearance = appearance;
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
}

Note that it was necessary to set the title text attribute to "white" as the title text defaulted to black if this attribute was not specified.

Also note that this should only apply to iOS version 15.0 or later. It does not work for earlier versions as the storyboard navigation bar custom tint is the default behavior.

iOS 15 Navigation Bar Transparent

1 Answers