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

user_6427258 0
Viewed 15698

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:

enter image description here

and after:

enter image description here

Simulator screen before and after (respectively) upgrade:

enter image description here

xcode13 swift xcode uikit ios
7 Answers

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

user_68839350

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
 }
user_112573850

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
}
user_6678790

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.

enter image description here

user_73456630

in XCode13.0 and iOS 15.0 tabbar and navigation bar transaparent issue programatically resolved 100%

For Tabbar

if #available(iOS 15, *) {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
 }

For NavigationBar

 if #available(iOS 15, *) {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
 }
user_66443530

first of all the problem is cause by unchecking translucent I fixed it by choosing navigation bar appearance from attributes inspector scroll edge it will fix it see this screen shot please

user_116977420

My problem is solved by following, replace the color on right you want for navigation bar

navigationController?.navigationBar.backgroundColor = .lightGray

user_170966770
Related