SwiftUI TabView .tabItem image seems too high

Question

Not sure if I am doing something wrong or if this is just how the TabView in SwiftUI appears now, but it seems to me that the images at the bottom seem much closer to the top border than in previous iOS versions (I am testing on iOS 16).

Here is the code I am using to render this:

struct MainView: View {
    
    var body: some View {
        TabView {
            NavigationView {
                ScrollView {
                    RoundedRectangle(cornerRadius: 16)
                        .frame(height: 1000)
                        .padding()
                }
                .background(.green)
            }
            .tabItem {
                Image(systemName: "house.fill")
            }
            .toolbarBackground(.background, for: .tabBar)
            NavigationView {
                LikesView()
            }
            .tabItem {
                Image(systemName: "heart")
            }
            NavigationView {
                MatchesView()
            }
            .tabItem {
                Image(systemName: "bubble.left")
            }
            NavigationView {
                ProfileView()
            }
            .tabItem {
                Image(systemName: "person")
            }
        }
        .tint(.primary)
    }
}

Am I missing something that would cause the images to be higher up in the tab bar or is that just how the standard tab bar looks now?

score 1 · Accepted Answer · answered Dec 01 '22 at 09:51

It looks default to me, just from a brief judgement between a couple other simulators and iOS versions. It does look maybe slightly higher on the 14 Pro Max, compared to something like the 11 Pro Max, since the symbols seem to be a little larger.

There is the ability to add text below the Image with a label which you may be used to seeing:

Label("Messages", systemImage: "bubble.left")

SwiftUI TabView .tabItem image seems too high

1 Answers1