Why is the UINavigationBar turning black?

18.6k Views Asked by At

Problem:

I have a UITableViewController embedded in a UINavigationController. Pressing a cell in the table view switches to another table view controller. In said table view controller, I'd like for the navigation bar to be invisible while still keeping the tab bar items so I added the following to its viewDidLoad():

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.tintColor = .black 

For the first UITableViewController, I'd like the navigation bar to be normal so in its viewDidAppear() I did the following:

self.navigationController?.navigationBar.isTranslucent = false

Everything is working fine except during the transition (which I am doing via performSegueWithIdentifier) the navigation bar on the first view controller disappears into blackness which looks ugly to be honest. Is there any way to prevent/fix this?

Screenshot: enter image description here

10

There are 10 best solutions below

3
On

You can animate the translucency of the navigation bar. So in the viewDidLoad for your second UITableViewController, you can write the following:

override func viewDidLoad() {
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.tintColor = .blackColor()

    // Play around with the duration until you find
    // a time interval, you find suitable
    UIView.animateWithDuration(2) {
        self.navigationController?.navigationBar.translucent = true
    }
}
0
On

Just change your navigationController view's backgroundColor

navigationController?.view.backgroundColor = // whatever
0
On

On viewDidLoad add:

extendedLayoutIncludesOpaqueBars = true
1
On

I ran into this again recently, and discovered a way to fix it in the storyboard. If you're using opaque navigation bars, ensure the "Extend Edges" setting for "Under Opaque Bars" is set. In fact, I just set all three of them as shown below:-

enter image description here

0
On

for me otherwise helped (Swift 5):

self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.barTintColor = UIColor.green //change to needed color
0
On

Below code helped me to get rid of black navigationBar in iOS 15+

if #available(iOS 15, *) {
            let textAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.titleTextAttributes = textAttributes
            appearance.backgroundColor = UIColor.white // UIColor(red: 0.0/255.0, green: 125/255.0, blue: 0.0/255.0, alpha: 1.0)
            appearance.shadowColor = .clear  //removing navigationbar 1 px bottom border.
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        }
0
On

Below code works for me,

if (@available(iOS 13.0, *)) {
     UINavigationBarAppearance *appearance = [UINavigationBarAppearance new];
     [appearance configureWithOpaqueBackground];
     [appearance setBackgroundColor:UIColor.yellowColor];
     appearance.titleTextAttributes = @{NSForegroundColorAttributeName: UIColor.whiteColor};
     controller.navigationItem.standardAppearance = appearance;
     controller.navigationItem.scrollEdgeAppearance = appearance;
     controller.navigationItem.compactAppearance = appearance;
 }
0
On

iOS 15 changed the way nav bars rendered. They are transparent by default. In most cases by default, no content is beneath the nav bars resulting in black color. The following code in AppDelegate(didFinishLaunchingWithOptions) fixed that for me.

if #available(iOS 15.0, *) {
        let navBarAppearance = UINavigationBarAppearance()
        navBarAppearance.configureWithOpaqueBackground()
        //Configure additional customizations here
        UINavigationBar.appearance().standardAppearance = navBarAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = navBarAppearance
}
1
On

Change the window background color for you application to a color that suits you:

self.window?.backgroundColor = .white

Other solutions causes other problems in multiple inner screens.

1
On

I had a very similar problem recently. Try setting self.navigationController?.navigationBar.translucent = true in both view controllers and self.edgesForExtendedLayout = UIRectEdgeNone.
Storyboard version: Extended Edges - Under Top Bars