22

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

shim
  • 9,289
  • 12
  • 69
  • 108
tendai
  • 1,172
  • 1
  • 11
  • 22

7 Answers7

27

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

Eduardo Santi
  • 425
  • 1
  • 4
  • 13
  • 3
    Thanks @Eduardo Santi, the solution above works, in my case, setting isTranslucent to true also works, and as for the tab bar, i had specify a background color – tendai Sep 24 '21 at 15:06
16

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
 }
Dmytro Yashchenko
  • 750
  • 4
  • 12
12

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
}
anoop4real
  • 7,598
  • 4
  • 53
  • 56
1

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

hohteri
  • 174
  • 1
  • 5
1

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
 }
Maulik Patel
  • 2,045
  • 17
  • 24
  • So tried that and now my status bar is white. We are not using any storyboards, and while this code changes my status bar from gray (which I believe is coming from the scene window) to white, it does not honor the background color of the view which is what the status bar should inherit, should it not? – justdan0227 May 09 '22 at 14:11
0

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

Khaled Samer Elsedek
  • 1
0

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

navigationController?.navigationBar.backgroundColor = .lightGray

Parminder
  • 1