CODEWITHSUNDEEP
swiftui
Martin Van Nostrand
Martin Van Nostrand

Reputation: 161

SwiftUI : TabBar app running on iPad missing tabs that's on iPhone

I'm working on a TabBar iPhone app (in SwiftUI, using a TabView) that set to allow running on an iPad.

On the iPhone, my TabBar has the 3 tabs, everything works fine. On the iPhone, even though the first tab's view is being displayed, but only the second and third tab's are in the TabBar. If I tap on the second or third tab, I am able to tap back in the "area" of the first tab and select it.

Any help to getting all the tabs to display on the iPad would be appreciated.

iPhone..

enter image description here

iPad..

enter image description here

    var body: some View {

        NavigationView {

            TabView(selection: $tabSelection) {
                QuestionnairesView(viewModel: questionnairesViewModel)
                .tabItem {
                    Label("Questions", systemImage: "person.fill.questionmark")
                }
                .tag(Tabs.tab1)

                TranscriptsView(viewModel: transcriptsViewModel)
                 .tabItem {
                     Label("Answers", systemImage: "quote.bubble.fill")
                }
                .tag(Tabs.tab2)

                AccountView()
                .tabItem {
                    Label("Settings", systemImage: "gearshape.fill")
                }
                .tag(Tabs.tab3)

            } // TabView
            .navigationBarTitle(returnNaviBarTitle(tabSelection: self.tabSelection))

        } // NavigationView

        // } //TabView
    }//Struct

Upvotes: 0

Views: 755

Answers (1)

Yrb
Yrb

Reputation: 9675

This is the exception to the rule that you place your NavigationView at the top of your hierarchy. A TabView does not play well inside of a NavigationView. Instead, place the, now, NavigationViews inside of each of your tabbed views and remove it from this view.

var body: some View {
    TabView(selection: $tabSelection) {
        Text("Tab 1")
            .tabItem {
                Label("Questions", systemImage: "person.fill.questionmark")
            }
            .tag(Tabs.tab1)
        
        Text("Tab 2")
            .tabItem {
                Label("Answers", systemImage: "quote.bubble.fill")
            }
            .tag(Tabs.tab2)
        
        Text("Tab 3")
            .tabItem {
                Label("Settings", systemImage: "gearshape.fill")
            }
            .tag(Tabs.tab3)
        
    } // TabView
}//body

Upvotes: 1

Related Questions