WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

Altering the appearance of TabView

Forums > iOS

It seems as though TabView is only a little bit customizable, with some important attributes not being available at all. Can anyone help me out?

Here's some code:

    var body: some View {
        TabView(selection: $selectedView) {
            ScoresGroupView(dataController: dataController, size: .small, goBack: handler)
                .tabItem {
            ScoresGroupView(dataController: dataController, size: .medium, goBack: handler)
                .tabItem {
            ScoresGroupView(dataController: dataController, size: .large, goBack: handler)
                .tabItem {

The point of this is to show a tabbed high scores screen for small, medium, and large board sizes. The rest of the app is full-screen with a black background and yellow text, so the modifier .ignoresSafeArea() at the bottom is how I'm trying to avoid having a white stripe of status bar across the top of an otherwise black screen. That doesn't work, though.

Similarly, in each of the tab items there's just a Text view with the label for the board size, and each has the modifier, .foregroundColor(.yellow), with the intent that the text will look like the rest of the text in the application. This, also, doesn't work.

Following a tip in this thread on the Apple Developer forum, I added this line to the init method on this struct:

        UITabBar.appearance().barTintColor = UIColor(Color.black)

This does, indeed, make the tab bar a dark gray, a little bit lighter than the black background of the application. However, the text labels are blue (for the selected tab) or even lighter gray (for the unselected tabs).

I tried wrapping the TabView in a ZStack whose first child is Color.black and then modifying the ZStack with .ignoresSafeArea but that didn't change anything. There's still a bright white status bar above a black screen with yellow high score entries and then a gray tab bar across the bottom with tiny, low-contrast blue or gray text labels.


Further beating of my head into the wall has revealed that to make the TabView ignore the safe area the thing to do is not, in fact, to add that modifier to the TabView but rather to put that modifier on the views inside the TabView.

My app is structured with the ScoreView body returning a TabView, and the individual tabs are ScoreGroupView. The ScoreGroupView body returns a ZStack wrapped around a Color and a VStack, which contains a HeaderView and some number of ScoreEntryView. If I put the .ignoresSafeArea modifier on the ZStack in the ScoreGroupView, then we don't have a white status bar.

Still looking for a way to make the tab titles more visible, though.


Save 50% in my Black Friday sale.

SAVE 50% To celebrate WWDC22, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.