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 answers

3
Kumuluzz 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
Gal On

Just change your navigationController view's backgroundColor

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

On viewDidLoad add:

extendedLayoutIncludesOpaqueBars = true
1
Echelon 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
nastassia On

for me otherwise helped (Swift 5):

self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.barTintColor = UIColor.green //change to needed color
0
Kudos 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
Rahul Bansal 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
F. Morales 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
hasan 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
artemchen 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