Search code examples
swiftxcodeswiftuitabitemios17

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()
}
Solution

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