Transparent TabBar when popping Child NavigationView iOS 15

Question

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

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

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

Illomened

Answer 1

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

Illomened

The key for me was the scrollEdgeAppearance. It needs to be set in iOS15. Great finding, thanks for sharing! – Alarum

Answer 2

This was all I needed to do.

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

Kathernkatheryn

Answer 3

If u using ScrollView, try add :

.padding(.bottom, 0.1)

on the end of your ScrollView. if you not using ScrollView for the entire page, try adding it on almost at the end of the body page.

but your tab bar will be fully colored white with 100% opacity

Oakes