Search code examples
iosswiftswiftuiuitabbartabview

SwiftUI transparent TabView (without background blur)?


From what I found on the internet, the Tabview in this version of Swift is meant to be transparent.

But in my case it always dispalys a grayish tone with a line on top when there is something underneath it in the view it is displaying. If I scroll down to a space in that view which is empty, the tabview becomes transparent again.

I have been trying to find a solution to this for ages but I'm a absolute noob. Can someone please help me fix this and make it always transparent? Thank you so much!

Screenshots:

Grayish when there's something underneath

Transparent when there's nothing underneath


Solution

  • Use UIBarAppearance.configureWithTransparentBackground().

    struct ContentView: View {
        
        init() {
            let transparentAppearence = UITabBarAppearance()
            transparentAppearence.configureWithTransparentBackground() // 🔑   
            UITabBar.appearance().standardAppearance = transparentAppearence
        }
        
        var body: some View {
            TabView {
                List {
                    ForEach(1...40, id: \.self) { eachRowIndex in
                        Text("Row \(eachRowIndex)")
                    }
                }
                .listStyle(.plain)
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            }
        }
    }
    

    enter image description here