CODEWITHSUNDEEP
iosswiftxcodeswiftui
DI.dev
DI.dev

Reputation: 467

SwiftUI - TabView initial tabItem not displaying text

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

Expected Result

Actual 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.

Upvotes: 0

Views: 1902

Answers (1)

DI.dev
DI.dev

Reputation: 467

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.

Upvotes: 4

Related Questions