SwiftUI: TabView with NavigationView

To have a TabView with a Navigation View, you have to wrap the pages in a TabView with their own NavigationView.

First, Start off with a tab view with three pages:

var body: some View {
        TabView {
            Text("Page One")
                .tabItem({
                    Text("Page 1")
                    Image(systemName: "1.circle")
                })
            Text("Page Two")
                .tabItem({
                    Text("Page 2")
                    Image(systemName: "2.circle")
                })
            Text("Page Three")
                .tabItem({
                    Text("Page 3")
                    Image(systemName: "3.circle")
                })
        }
    }
iPhone - TabView

Next, wrap each of the TabView's Items in their own NavigationView, and make sure to move the tab item to be an object of the NavigationView, otherwise the buttons will be invisible (but still work). Also, add a title on the NavigationViews, setting the navBarTitle as a property of the view that the NavigationView contains. And there it is, an app with a TabView and a NavigationView.

var body: some View {
        TabView {
            NavigationView {
                Text("Page One")
                    .navigationBarTitle("Page One")
            }
            .tabItem {
                Image(systemName: "1.circle")
                Text("Page 1")
            }
            NavigationView {
                Text("Page Two")
                    .navigationBarTitle("Page Two")
            }
            .tabItem {
                Image(systemName: "2.circle")
                Text("Page 2")
            }
            NavigationView {
                Text("Page Three")
                    .navigationBarTitle("Page Three")
            }
            .tabItem {
                Image(systemName: "3.circle")
                Text("Page 3")
            }
        }
        .edgesIgnoringSafeArea(.top)
    }
iPhone - TabView + NavigationView

Remember to add the line of code as a property of the TabView, .edgesIgnoringSafeArea(.top), as this will allow the status bar to share the translucency of the nav bar.

5 thoughts on “SwiftUI: TabView with NavigationView

  1. Hi Jake,

    If I push a view to any of the above navigation views, I still see the tab bar at the bottom.
    is there any way to hide it ??
    Or do you have a alternate solution where I can navigate without showing the bottom tab bar ??

    1. Hi Sai,

      If you do not want the bottom tab bar showing, you can create more of a slide out menu (hamburger style). That would allow for switching views in a menu, but the actual menu would be hidden when not in use. I do not believe I have a good example here on the website, but I would be more than happy to send you some code of what I am talking about.

      Best,
      Jake

  2. Hi Jake,
    I’m trying to use the tab items in my tab view as buttons to navigate to a new view entirely. As I launch my application I want it to navigate to a dashboard with tabs at the bottom that the user can click to navigate to new pages. I was able to navigate to the new pages by making an HStack of NavigationLink buttons, but I was wondering if this can be done with TabView instead.

    1. Hi Brad,

      Yes, this is the purpose of a TabView. It conveniently handles the navigation between base tab pages for you, and allows for separate navigation stacks for each of those views. If you are initially navigating to the tab bar view, you will have to do some tricks to make sure the two navigation controllers do not interfere with each other. I would apply the navigationBackBar modifier and the navigationBackBarHidden on the Tabview, then the NavigationLink the is used to get to the tab bar view will be inaccessible once in the tab bar view. One could also solve this issue building their own tab bar, which is something like you described.

      Best,
      Jake

  3. Hi Jake,

    This was very helpful. Thank you for taking the time to post your findings. Thoughtful things like this keep the world turning.

Leave a Reply

Your email address will not be published. Required fields are marked *