Unable to change TabView's background color

Question

edee1337 OP

Created 5d

Replies 2

Boosts 0

Participants 2

Hello,

I seem to be unable to change TabView's background color (not the bar, but the background of the entire TabView), no matter what I try.

What I am looking for:

To make the TabView's background clear.

My code:

TabView(selection: $activeScreen) {
   Screen1()
      .tabItem {
          Label("Menu", systemImage: "list.dash")
       }
 }

Screen1 is defined as:

struct Screen1: View {
   var body: some View {
      VStack {
         Text("Hello")
       }
      .frame(maxWidth: .infinity, maxHeight: .infinity)
   }
}

What I have tried, based on suggestions online:

Changing UITabBarAppearance in init(), and .onAppear()
TabView().background(.clear)

In all cases, the TabView's background remains either white or black, depending on the device's theme. I can change the background behind it by placing it in a ZStack, but that is not what I am looking for, I want the background itself to be clear.

The only way that TabView will honor .background(.clear) is if I add the following:

.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))

But this changes the style of the TabView, which is not the desired behavior.

Any help would be greatly appreciated, thank you!

Boost

Answer 1

Claude31 OP

5d

Did you try one of the many solutions proposed in this old thread ? https://forums.developer.apple.com/forums/thread/121799

0

Answer 2

edee1337 OP

4d

Hello,

Yes I tried them all. Most of those answers are about changing the color of the TabView bar, not the background of the TabView. Here is what I tried:

Added the following to both init() and .onAppear()

let appearance = UITabBarAppearance()
appearance.configureWithTransparentBackground()
appearance.backgroundColor = .clear
UITabBar.appearance().standardAppearance = appearance

Background modifier

TabView{...}.background(.clear)

Toolbar modifier

TabView{...}.toolbarBackground(.clear, for: .tabBar)
TabView{...}.toolbarBackground(.visible, for: .tabBar)

None of the above worked. The background for TabView remained white (or black if the device has Dark Mode enabled). The only thing that allows me to make the background of the TabView clear is if I add this:

TabView{...}.tabViewStyle(.page)
TabView{...}.indexViewStyle(.page(backgroundDisplayMode: .always))

But this then changes the TabView behavior to a page view.

This is with Xcode 16.0, happening both in the Simulator and on device running on iOS 18.1.1.

0