0

Here is my view:

var body: some View {
    TabView {
        CountriesView(homeViewModel: homeViewModel)
            .tabItem {
                Label {
                    Text("Home")
                } icon: {
                    Image(systemName: "house.fill")
                }
            }
            .onAppear {
                homeViewModel.getCountries()
            }

        SavedCountriesView(homeViewModel: homeViewModel)
            .tabItem {
                Label {
                    Text("Saved")
                } icon: {
                    Image(systemName: "heart.fill")
                }
            }
    }
    .onAppear {
        UITabBar.appearance().backgroundColor = UIColor.gray
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
        UITabBar.appearance().barTintColor = UIColor(Color.black)
    }
}

I have managed to change background and unselectedItem color but I can't change the color when item selected.

enter image description here

Here is what I've tried so far:

1-) Change UITabBar's barTintColor property.

2- Change the text and the image color from their properties. Adding foreground color to them does not effect this.

3-) Change TabView's accent color even tho it's deprecated on future versions. Also changing the accent color effects the whole page. I just want to change selected item colors.

themmfa
  • 499
  • 4
  • 15

1 Answers1

0

TabView seems to use your Apps AccentColor for the selected color. So you can either define it in your Asset Catalog or manually set it for the TabView like this

TabView {

}
.accentColor(.red)

.accentColor seems to be soft-deprecated though and to be replaced with .tint in the future, but unlike .accentColor the .tint modifier does not seem to be honored.

hallo
  • 825
  • 1
  • 7
  • 10
  • 1
    The problem is using accentColor makes the whole ui using the same color. When I use accent color tabview item colors change but also the back button color changes when navigate to another page – themmfa Oct 08 '22 at 16:10