SwiftUI - TabView initial tabItem not displaying text

Question

Summary of the problem

I have HomeView which contains the TabView (which is inside a NavigationView, see the code below). If I am to load the HomeView from another view (LoginView) it loads as expected and everything works. If I try to load the HomeView directly like this (code is in my ContentView):

if authService.isLoggedIn {
    HomeView()
} else {
    LoginView()
}

it again loads the HomeView with the tabs at the bottom but my first tab is missing text and only displays its image. Strangely if I switch to a tab (i.e. click Account) the text on the first tab appears again.

Here is the code for my TabView:

NavigationView {
        TabView(selection: $selected) {
            PlayView()
                .tabItem {
                    Image(systemName: "play.circle.fill")
                        .font(.system(size: 24))
                    Text("Play")
            }
            .navigationBarHidden(true)
            .navigationBarTitle("")
            .tag(1)
            
            AccountView()
                .tabItem {
                    Image(systemName: "person.circle.fill")
                        .font(.system(size: 24))
                    Text("Account")
            }
            .tag(3)
            
            NotificationsView()
                .tabItem {
                    Image(systemName: "bell.fill")
                        .font(.system(size: 24))
                    Text("Notifications")
            }
            .tag(4)
        }
        .accentColor(Color(K.Colors.Secondary))
        .navigationBarTitle("")
        .navigationBarHidden(true)
}

Expected Result

Actual Result

Note: Notice how the icon is displayed at lower level than other icons, so the text is actually not displaying at all

What I Tried So Far

I did try only a few things, because the TabView is not very well documented on Apple's official documentation.

I tried moving the NavigationView both down and up the view hierarchy
Setting another tab for initial selection
Switching places of Image() and Text() inside the .tabItem section
Searching for a similar problem through the internet

This sounds like a SwiftUI bug. Did you try with latest Xcode? — Asperi
@Asperi I am using the latest stable version. Not willing to go down that road and use the beta version yet. — DI.dev
I had the similar problem but on simulator only. On the device it was working fine. Where do you run your app? — pawello2222
I have this issue on both simulator and physical device. @pawello2222 — DI.dev
@Dasvil I can't reproduce the problem with the code you provided. — pawello2222

DI.dev DI.dev · Accepted Answer · 2020-06-24T12:56:04

I have found a solution! Turns out what was showing at the bottom was that navigation bar title, which I was setting to an empty string. So I changed my navigation bar titles on every View of the TabView elements. The code now looks like this:

NavigationView {
    TabView(selection: $selected) {
        PlayView()
            .tabItem {
                Image(systemName: "play.circle.fill")
                    .font(.system(size: 24))
                Text("Play")
        }
        .navigationBarHidden(true)
        .navigationBarTitle("Play")
        .tag(1)
        
        AccountView()
            .tabItem {
                Image(systemName: "person.circle.fill")
                    .font(.system(size: 24))
                Text("Account")
        }
        .navigationBarHidden(true)
        .navigationBarTitle("Account")
        .tag(3)
        
        NotificationsView()
            .tabItem {
                Image(systemName: "bell.fill")
                    .font(.system(size: 24))
                Text("Notifications")
        }
        .navigationBarHidden(true)
        .navigationBarTitle("Notifications")
        .tag(4)
    }
    .accentColor(Color(K.Colors.Secondary))
    .navigationBarTitle("")
    .navigationBarHidden(true)
}

and It works as expected.