Question 274281 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – How to change selected TabItem background color? SwiftUI

Im running into a weird discrepancy where the preview on Xcode shows the view that I want, but when I deploy it to my iPhone 14 pro (iOS 17) the whole background of the selected tab item becomes highlighted. What’s causing the difference between the preview and deployment version? And likewise, how do I remove the background color in the deployed view so it looks like the preview?

Preview, the correct view:
Preview, the correct view

Deployed version with highlighted background
Deployed version with highlighted background

Code: (using AccentColor in Assets for the color)

import SwiftUI

struct PEView: View {
    var body: some View {
        TabView {
           DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
           SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
           SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
    }
}

#Preview {
    PEView()
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Appears to be fixed in most recent iOS 17 beta update.


  2. 0

    try using .toolbarBackground(.hidden, for: .tabBar) modifier.

    struct PEView: View {
    var body: some View {
        TabView {
            DiaryView()
                .tabItem { Image(systemName: "list.clipboard" ) }
            SearchView()
                .tabItem { Image(systemName: "magnifyingglass" ) }
            SettingsView()
                .tabItem { Image(systemName: "gearshape" ) }
        }
        .toolbarBackground(.hidden, for: .tabBar)
    }
}

    This could be an iOS 17 only issue as I’m not able to reproduce it on iOS 16. In which case you could also try creating your own cutom bottom tab bar.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search