SwiftUI: Use image from assets for TabView in NavigationStack

Question

NavigationStack {
    TabView(selection: $selection) {
        HomeView()
            .tabItem {
                Image(systemName: "rectangle.grid.1x2.fill")
                    .padding(.top, 8)
            }
            .tag(0)
        
        ChatsView()
            .tabItem {
                Image(systemName: "message")
                    .padding(.top, 8)
            }
            .tag(1)
    }
    .accentColor(.black)
}

I want to use an image from assets instead of Image(systemName: "message"). When I write Image("myImage"), it does load the image from the assets, but it's not the same size, it's way too large. So I tried Image("myImage").resizable().frame(width: 20, height: 20). But the resizing just does not work here, the size stays the same, I don't know why. So the next thing I tried is just scaling down the asset image. This does work, but the image displayed is very pixelated with this approach. So not an option either.

How can I do this?

https://stackoverflow.com/questions/58094384/swiftui-tabview-tabitem-with-custom-image-does-not-show — ChrisR, Apr 05 '23 at 15:30
You have to provide an image that is of the required size. The human interface guidelines have the sizes. — lorem ipsum, Apr 05 '23 at 20:16

NexusUA · Answer 1 · 2023-04-05T14:57:11.810

1

Try this:

struct CustomTabBar: View {
    @Binding var selection: Int
    
    var body: some View {
        HStack {
            Button(action: {
                self.selection = 0
            }) {
                Image(systemName: "rectangle.grid.1x2.fill")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 0 ? .black : .gray)
            }
            
            Button(action: {
                self.selection = 1
            }) {
                Image(systemName: "message")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 1 ? .black : .gray)
            }
        }
        .padding()
    }
}

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        VStack {
            TabView(selection: self.$selection) {
                HomeView()
                    .tag(0)
                ChatsView()
                    .tag(1)
            }
            CustomTabBar(selection: self.$selection)
        }
    }
}

edited Apr 05 '23 at 14:57

answered Apr 05 '23 at 13:42

NexusUA

217
1
3
13

Does not work unfortunately, the size stays the same – mathematics-and-caffeine Apr 05 '23 at 13:51
1

Did you try to use .renderingMode(.original)? – NexusUA Apr 05 '23 at 13:57
Just tried, also not working – mathematics-and-caffeine Apr 05 '23 at 14:17
1

Try to use my answer again. I changed some parts of code – NexusUA Apr 05 '23 at 14:58
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 12 '23 at 04:50

score 1 · Accepted Answer · answered Apr 24 '23 at 13:53

I had to adjust NexusUA's answer a little to make it work:

struct CustomTabBar: View {
    @Binding var selection: Int
    
    var body: some View {
        HStack {
            Button(action: {
                self.selection = 0
            }) {
                Image(systemName: "rectangle.grid.1x2.fill")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 0 ? .black : .gray)
            }
            
            Button(action: {
                self.selection = 1
            }) {
                Image(systemName: "message")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 1 ? .black : .gray)
            }
        }
        .padding()
    }
}

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        VStack {
            TabView(selection: self.$selection) {
                HomeView()
                    .tag(0)
                ChatsView()
                    .tag(1)
            }
            // add this
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .navigationBarHidden(true)

            CustomTabBar(selection: self.$selection)
        }
    }
}

SwiftUI: Use image from assets for TabView in NavigationStack

2 Answers2