Transparent TabBar when popping Child NavigationView iOS 15

user_11486218 0
Viewed 1073

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

ios15 swiftui swift uitabbarcontroller ios
2 Answers

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()
    }
}
user_114862180

This was all I needed to do.

if #available(iOS 15.0, *) {
    let tabBarAppearance = UITabBarAppearance()
    tabBarAppearance.configureWithDefaultBackground()
    UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
}
user_15695390
Related