ios – SwiftUI TabView different behavior on simulator and device


I’m developing a SwiftUI application and have encountered an issue with TabView where the tab items display differently on an iOS device compared to the iOS simulator.

Code:

struct TabViewTestApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {
                ContentView()
                    .tabItem {
                        Label("First", systemImage: "gear")
                    }
                SecondView()
                    .tabItem {
                        Label("Second", systemImage: "chart.pie")
                    }
            }
        }
    }
}

I’ve created a clean project with the above code to isolate the issue. The tab bar appears with the expected styling in the simulator but on the actual device, the selected tab item has an unwanted background color.

Expected Behavior:

The selected tab item should only change the tint color of the label without any additional background color, as it appears in the simulator.

Actual Behavior:

On my iPhone 15 running iOS 17.2.1, the selected tab item has an additional background color that I did not set and do not want. See the difference in the screenshots below for simulator vs iOS device.

Question:

How can I remove the unexpected background color for the selected tab item on the device, so it matches the appearance in the simulator?

Environment:

Xcode 15.1
iOS Simulator running iOS 17.2
Actual device: iPhone 15 running iOS 17.2.1

Device
Simulator

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img