SwiftUI - TabView with NavigationView generates gray area

Question

I have some problems with my tabbed view when I set isTranslucent to false in combination with a NavigationView.

Does anyone know how to fix this? The problem is shown in the attached image.

I need translucent set to false otherwise I can't get the dark color.

Answer 1

You can set backgroundColor. Don't set isTranslucent to false or it will create these artefacts you mentioned.

UITabBar.appearance().backgroundColor = .black
UINavigationBar.appearance().backgroundColor = .black

It becomes much darker. It isn't completely opaque though.

Edit: Just watched Modernizing Your UI for iOS 13 This is the way to do it :

The TabView and NavigationView are actually UIHostedController for the legacy UITabBarController and UINavigationController:

let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
appearance.largeTitleTextAttributes = [.foregroundColor: UIColor  .white]

Then set the appearance on the various type of appearance.

tabBar.standardAppearance = appearance

2nd Edit:

extension UINavigationController {
    override open func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        navigationBar.standardAppearance = appearance
        navigationBar.compactAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
    }
}

extension UITabBarController {
    override open func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        tabBar.standardAppearance = appearance
    }
}

There should be a cleaner way to get to both tabBar and navBar.

Reference: https://developer.apple.com/videos/play/wwdc2019/224/

Answer 2

I was using UIKit with SwiftUI. My Tab bar was creating in storyboard but the view for which I was getting extra bottom space was a swiftui view as you mentioned. I tried all above solution but Nothing worked for me.

I am using Xcode 12.4 for development. My solution is to mark Translucent to true in storyboard and Bottom extra gray bar was gone.

Answer 3

Just customize it in an extension like this:

extension UITabBarController {
    override open func viewDidLoad() {
        super.viewDidLoad()
        let appearance = UITabBarAppearance()
        appearance.backgroundColor = .black
        tabBar.standardAppearance = appearance
    }
}

Pay attention that the overridden function must be viewDidLoad(). At least it doesn't work for me when it is a viewDidAppear(:) function.

Answer 4

It's easier than all that, just delete the next line:

UITabBar.appearance().isTranslucent = false