Tab & Navigation Bar changes after upgrading to XCode 13 (& iOS 15)

Question

I have an iOS app, since upgrading to Xcode 13, I have noticed some peculiar changes to Tab and Navigation bars. In Xcode 13, there's now this black area on the tab and nav bars and on launching the app, the tab bar is now black as well as the navigation bar. Weird enough, if the view has a scroll or tableview, if I scroll up, the bottom tab bar regains its white color and if I scroll down, the navigation bar regains its white color.

N:B: I already forced light theme from iOS 13 and above:

 if #available(iOS 13.0, *) {
     window!.overrideUserInterfaceStyle = .light
 }

Can anyone assist or point me in the right direction so as to deal with this peculiarity?

Is there a simple fix to get Storyboard to readjust or this is a case where I have to make changes to each view manually?

Example of Storyboard before upgrade:

and after:

Simulator screen before and after (respectively) upgrade:

Solution 1

About Navigation Bar is black, try do it:

let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .red
appearance.titleTextAttributes = [.font: 
UIFont.boldSystemFont(ofSize: 20.0),
                              .foregroundColor: UIColor.white]

// Customizing our navigation bar
navigationController?.navigationBar.tintColor = .white
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

I wrote a new article talking about it.

https://medium.com/@eduardosanti/uinavigationbar-is-black-on-ios-15-44e7852ea6f7

Solution 2

After update to XCode 13 & iOS 15 I also faced some Tab Bar issues with bar background color and items text color for different states. The way I fixed it:

if #available(iOS 15, *) {
   let tabBarAppearance = UITabBarAppearance()
   tabBarAppearance.backgroundColor = backgroundColor
   tabBarAppearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: selectedItemTextColor]
   tabBarAppearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: unselectedItemTextColor]
   tabBar.standardAppearance = tabBarAppearance
   tabBar.scrollEdgeAppearance = tabBarAppearance
} else {
   UITabBarItem.appearance().setTitleTextAttributes([.foregroundColor: selectedItemTextColor], for: .selected)
   UITabBarItem.appearance().setTitleTextAttributes([.foregroundColor: unselectedItemTextColor], for: .normal)
   tabBar.barTintColor = backgroundColor
 }

Solution 3

For me I had problem with both Navbar and TabBar so I applied the styles globally in the AppDelegate

func configureNavigationBarAppearance() {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = .white
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
}

func configureTabBarAppearance() {
    let appearance = UITabBarAppearance()
    appearance.backgroundColor = .white
    UITabBar.appearance().standardAppearance = appearance
    UITabBar.appearance().scrollEdgeAppearance = appearance
}

Solution 4

You can do this in storyboards by selecting the Tab Bar and in attributes inspector selecting both standard and scroll edge appearance, setting both of their settings as with iOS 13 and for custom fonts or colors you need to change Standard Layout Appearances Stacked to Custom and set the attributes.

For Navigation Bar you set Standard and Scroll Edge Appearances similarly in Attributes Inspector but this has been mentioned elsewhere in stack overflow.

View more solutions