Making TabView not translucent on SwiftUI produces a new view on top

Question

Hello everyone. I'm creating a simple SwiftUI app and I'd like my app's TabView to have a custom background and not be translucent.

To achieve this I use UITabBar.appearance().backgroundColor = Color and UITabBar.appearance().isTranslucent = false, which is supposed to do exactly that, and yes, it makes the bar not translucent, but instead of giving the bar the color I chose, it produces a new view on top of the tab bar that isn't supposed to be there, and obviously wasn't there before.

Without changing tab bar translucency and color

Changing tab bar translucency and color

You can notice the new view that appeared. I guess this is a problem with isTranslucent because when I remove it the new view is gone.

Is there a way I can change the color and make the bar not translucent and not having that view appearing?

Any help is appreciated. Thanks in advance.

My code

SceneDelegate (only the changing color part)

UITabBar.appearance().isTranslucent = false
UITabBar.appearance().backgroundColor = UIColor(named: "backgroundColor")

TabView

struct TabController: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection) {
            HomePageView()
                .tabItem {
                    Image(systemName: "house.fill")
                        .font(.title)
                }
                .tag(0)

            Text("Second View")
                .font(.title)
                .tabItem {
                    Image(systemName: "bell.fill")
                        .font(.title)
                }
                .tag(1)
        }
            .edgesIgnoringSafeArea(.top)
    }
}

Answer 1

You can set a tabbar color with this code. Write this code in SceneDelegate

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()
UITabBar.appearance().isTranslucent = true
UITabBar.appearance().backgroundColor = .black

In TabBar Background you can set any other color instead of black. Its working perfectly fine.

ContentView:

TabView(selection: $selection) {
        Text("1st View")
            .tabItem {
                Image(systemName: "house.fill")
                    .font(.title)
            }
            .tag(0)

        Text("Second View")
            .font(.title)
            .tabItem {
                Image(systemName: "bell.fill")
                    .font(.title)
            }
            .tag(1)
    }
        .edgesIgnoringSafeArea(.top)

Answer 2

This is the correct way to do it.

It works with SwiftUI too as the TabView and NavigationView are actually UIHostedController for the legacy UITabBarController and UINavigationController.

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

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

Then set the appearance on the various type of appearance.

navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance

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

2nd Edit: Need a figure out a clean way to get to the UINavigationController from a SwiftUI view.

In the meantime, this will help:

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