NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

I do not understand how to use the Tab View properly

Forums > SwiftUI

When I make a ContentView, putting TabView as a parent of NavigationView and compiling my program, I see many tabs at the same time on my Mac. I am using IPad target running on my M1 Mac.

   

@Bnerd  

I am not sure I undestand completely your problem but look below:

A typical tabview shoule be like this

var body: some View {
        TabView {
            ViewOne()
                .tabItem {
                    Label("ViewOne", systemImage: "person.3")
                }
            ViewTwo()
                .tabItem {
                    Label("ViewTwo", systemImage: "person.2")
                }
        }

Tabview should be your first View element.,

   

At the bottom of this page Paul gives a tip.

Tip: It’s common to want to use NavigationView and TabView at the same time, but you should be careful: TabView should be the parent view, with the tabs inside it having a NavigationView as necessary, rather than the other way around.

Although, it is a bit difficult to tell exactly what that means.

Should we wrap all of our tabs in a single NavigationView?

struct ContentView: View {
    @State private var selectedTab = "One"

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                Text("Tab 1")
                    .tabItem {
                        Label("One", systemImage: "star")
                    }
                    .tag("One")

                Text("Tab 2")
                    .tabItem {
                        Label("Two", systemImage: "circle")
                    }
                    .tag("Two")
            }
        }
    }
}

Or does each tab need its own NavigationView?

struct ContentView: View {
    @State private var selectedTab = "One"

    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationView {
                Text("Tab 1")
            }
            .tabItem {
                Label("One", systemImage: "star")
            }
            .tag("One")

            NavigationView {
                Text("Tab 2")
            }
            .tabItem {
                Label("Two", systemImage: "circle")
            }
            .tag("Two")
        }
    }
}

I believe the second option is the correct way. However, if you are using your own custom Views instead of just Text Views, you could just wrap the entire body of the View that you have created in a NavigationView, and then you wouldn't need to worry about wrapping it in a NavigationView again when you are creating the TabView.

   

Yes, the second way is correct.

   

Ah, now I understand. I had a common navigation view, however it was the child of TabView. So it is not only me who misunderstood Paul haha.

   

Hacking with Swift is sponsored by Play

SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!

Click to learn more about Play!

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.