UINavigationBar Is Black on iOS 15

This short article will help you resolve this issue between iOS 14 and iOS 15 versions in 3 minutes.

Photo by Lorenzo Rui on Unsplash

Introducing

The final version of iOS 15 was finally released publicly on September 20th and many new features were introduced by Apple and, as every developer in the Apple ecosystem knows, we often have to make adjustments to our apps to provide the best experience for our end user.

One of these cases was with the navigation system using UINavigationBar, where in the case of the application I’m currently working on, the navigation bar customizations weren’t being applied as they were on iOS 14, which initially caused a surprise.

After a few hours of research I remembered that since iOS 13 Apple had introduced an appearance settings class in the UIKit API called UINavigationBarAppearance. Honestly, I didn’t remember the existence of this class, and practically all iOS developers that I keep in touch with often didn’t use it either. That said, let’s see in practice how to use this class if you want to keep the navigation bar aspect until iOS 14.

Coding

Let’s start customizing the navigation bar as we’ve done so far, something like this:

Usual code

This code will have different results between iOS 14 and iOS 15:

iOS 14 vs iOS 15

And now let’s see how we can standardize our navigation bar between iOS versions:

Using UINavigationBarAppearance class

Some considerations about this update:

• You don’t need to use the isTranslucent property because we set the appearance to be opaque with the configureWithOpaqueBackground() method;
• We must use the titleTextAttributes property of the appearance settings and not the navigation bar;
• After configuring the new appearance, we define that the navigation bar will receive these settings through the standardAppearance property;
• We can also define that the navigation bar will send these settings if we have a subclass that scrolls and this scroll touches the navigation bar. For this, we use the scrollEdgeAppearance property.

Now the final result:

iOS 14 vs iOS 15 updated

Considerations to Go Beyond

We can use the same appearance settings strategy for other components that we use frequently, such as: UITabBarAppearance an UIToolbarAppearance, because these classes inherit from UIBarAppearance like UINavigationBarAppearance we saw above. To see all the classes that can be configured you can consult the official Apple documentation.

I hope to have contributed to our community with this article. If it was helpful to you, share it with other developers and feel free to follow me, comment and clap.