Search code examples
swiftuiswiftui-tabview

Change Tabbar Icon Image SwiftUI


I want to change tabItem icon image when tapped on one of the tabItem in this code. How can it be done?

var body: some View {
    ZStack {
        TabView(selection:$selection) {
            OffersView()
                .tabItem ({
                    Image(systemName: "bag").renderingMode(.template)
                    Text("Offers")
                })
                .tag(1)
            StepView()
                .tabItem ({
                    Image(systemName: "figure.walk.circle").renderingMode(.template)
                    Text("Steps")
                })
                .tag(2)
            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("Profile")
                }
                .tag(3)
        }
        .accentColor(Color("ColorOnboarding"))
        .navigationBarBackButtonHidden(true)
    }

Solution

  • You can change image like this,

    var body: some View {
        ZStack {
            TabView(selection:$selection) {
                OffersView()
                    .tabItem ({
                        Image(systemName: selection == 1 ? "bag" : "bag2").renderingMode(.template)
                        Text("Offers")
                    })
                    .tag(1)
                StepView()
                    .tabItem ({
                        Image(systemName: selection == 2 ? "figure.walk.circle" : "figure.walk.circle2").renderingMode(.template)
                        Text("Steps")
                    })
                    .tag(2)
               
    //            -----Other Code-----