SwiftUI: How to update image to filled / outlined in TabView

Question

I'm trying to use filled image when it is selected and outlined image when it is deselected. I tried to render the images but still filled

So I thought this would work, but it doesn't:

struct ListTabView: View {

    @State private var selectedTab = 0

    var body: some View {

        NavigationView {

            TabView(selection: $selectedTab) {

                Text("Tab 1")
                    .onTapGesture {
                        self.selectedTab += 1
                    }
                    .tabItem {
                        selectedTab == 0 ? Image(systemName: "star.fill") : Image(systemName: "star")
                        Text("First")
                    }
                    .tag(0)

                Text("Tab 2")
                    .onTapGesture {
                        self.selectedTab -= 1
                    }
                    .tabItem {
                        selectedTab == 1 ? Image(systemName: "moon.stars.fill") : Image(systemName: "moon.stars")
                        Text("Second")
                    }
                    .tag(1)
            }
            .accentColor(.pink)
            .onAppear {
                UITabBar.appearance().barTintColor = .white
            }
        }
    }
}

struct ListTabView_Previews: PreviewProvider {
    static var previews: some View {
        ListTabView()
    }
}

At first glance I thought it was a duplicate of: https://stackoverflow.com/q/57140435/1746142 But no, you have a different problem here. — kelin, Apr 07 '23 at 11:40

score 2 · Accepted Answer · answered Oct 10 '21 at 18:02

Your code actually works. The issue is something else not documented that I can find. If you use a non .fill variant of an SF Font, the .fill variant will be substituted. Use the following code to test it:

TabView(selection: $selectedTab) {
    VStack {
        Text("Tab 1")
        Text(Image(systemName: "star"))
    }
    .tabItem {
        selectedTab == 0 ? Image(systemName: "star") : Image(systemName: "sun.max")
        Text("First")
    }
    .tag(0)
    
    VStack {
        Text("Tab 2")
        Text(Image(systemName: "moon.stars"))
    }
    .tabItem {
        selectedTab == 1 ? Image(systemName: "moon.stars") : Image(systemName: "sun.max")
        Text("Second")
    }
    .tag(1)
}

You will note I used plain variants, and yet the filled variant was used. Also, you don't need the .onTap(), but I suspect you added it when the images didn't seem to switch.

You're absolutely right because I had a doubt when I tried to use different symbol to see if the selection is actually work. @Yrb Thank you so much for your help. — Hamad Fuad, Oct 10 '21 at 20:06

score 2 · Answer 2 · answered Oct 10 '21 at 20:19

2

You can add this to Image / Label:

Image(systemName: selectedTab == 0 ? "star.fill" : "star")
.environment(\.symbolVariants, selectedTabItemIndex == 0 ? .fill : .none)

It will allow you to set the symbol variants as you would expect it.

answered Oct 10 '21 at 20:19

Hamad Fuad

266
3
12

score 1 · Answer 3 · answered Apr 07 '23 at 11:43

In case your app supports iOS 14 and you can't use .symbolVariants environment, this hack will save you:

Image(uiImage: 
    UIImage(systemName: selectedTab == 0 ? "star.fill" : "star")
)

This bypasses Apple hidden logic that replace all plain icons with filled in a tab bar.

SwiftUI: How to update image to filled / outlined in TabView

3 Answers3