SwiftUI TabBar Ellipsis Not Vertically Centered

Question

I'm just getting started with a SwiftUI app and so the first thing I'm doing is getting my navigation set up.

I'm starting with a very simple TabBar using all default stuff, including SF Symbols for the icons.

struct ContentView: View {
    var body: some View {
        TabView {
            ActivityView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Activity")
                }
            
            DiscoverView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Discover")
                }
            
            MoreView()
                .tabItem {
                    Image(systemName: "ellipsis")
                    Text("More")
                }
            
        }
    }
}

It's rendering like this:

Why is the ellipsis not vertically centered? I thought one of the big selling points of SF Symbols is that they would all line up with each other.

I'm really confused.

Answer 1

Xcode 12.5.1 & 13.0 Beta 1

The 'ellipsis' symbol is still rendering to the top of the tabItem frame, and the frame and offsets cannot be modified directly in SwiftUI. I have resolved it by wrapping the image in a UIImage and removing the baseline.

    MoreView()
        .tabItem {
            Image(uiImage: UIImage(systemName: "ellipsis")!.imageWithoutBaseline())
            Text("More")
        }