Search code examples
iosswiftswiftuiuitabbarcontrollerios15

Transparent TabBar when popping Child NavigationView iOS 15

I have a SwiftUI application with a TabBar. If I open a detail child view from a NavigationView, and then click on "Back", the TabBar would become transparent, showing the items in the Feed underneath the TabBar icons.

  1. FROM THE HOME FEED, OPEN A CHILD NAVIGATION DETAIL VIEW. ---------------

enter image description here

  1. THEN ONCE INSIDE THE DETAIL VIEW, CLICK BACK. ---------------

enter image description here

  1. YOU WILL SEE THIS BUG. THE TAB BAR WILL BE TRANSPARENT. ---------------

enter image description here

Solution

  • With iOS 15, Apple has extended support for scrollEdgeAppearance to UIKit. This setting produces a transparent TabBar background by default.

    To fix the issue add the code below to your SceneDelegate file, to define the color of your TabBar, so it isn't made transparent automatically by SwiftUI.

    class SceneDelegate: UIResponder, UIWindowSceneDelegate {

var window: UIWindow?

func scene(
    _ scene: UIScene,
    willConnectTo session: UISceneSession,
    options connectionOptions: UIScene.ConnectionOptions
) {

    guard let windowScene = (scene as? UIWindowScene) else { return }        

    // MARK: ADD THIS CODE BELOW TO YOUR SCENE DELEGATE.
    
    // TAB BAR BACKGROUND COLOR HERE.
    UITabBar.appearance().barTintColor = UIColor.white
    
    // TAB BAR ICONS COLOR HERE.
    UITabBar.appearance().tintColor = UIColor.blue
    UITabBar.appearance().isTranslucent = true
    
    if #available(iOS 15.0, *) {
        let appearance = UITabBarAppearance()
        appearance.configureWithOpaqueBackground()
        
        // TAB BAR BACKGROUND COLOR HERE. (same as above)
        appearance.backgroundColor = UIColor.white
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = UITabBar.appearance().standardAppearance
    }
    
    let window = UIWindow(windowScene: windowScene)
    window.rootViewController = UIHostingController(rootView: RootView())
        self.window = window
        window.makeKeyAndVisible()
    }
}