8

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

Artur Marchetto
  • 646
  • 1
  • 5
  • 17

3 Answers3

5

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()
    }
}
Artur Marchetto
  • 646
  • 1
  • 5
  • 17
  • 1
    The key for me was the scrollEdgeAppearance. It needs to be set in iOS15. Great finding, thanks for sharing! – atineoSE Nov 19 '21 at 18:01
5

This was all I needed to do.

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

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

OnSense
  • 11
  • 2