NavigationView inside a TabView Swift UI

Question

I'm just picking up SwiftUI after a long break but I don't understand why I can't place a Navigation View within a Tab View.

I want my Navigation View to be a .tabItem so the view appears as part of the main app navigation so I'm trying this :

struct ContentView: View {
    var body: some View {
            TabView {
            
        NavigationView {
            
            .tabItem {
                Text("Home")
            }
                    
            Text("Tab bar test")
                .navigationBarTitle("Page One")
        }
}

This doesn't work with error message

Cannot infer contextual base in reference to member 'tabItem'

But when I try this

    var body: some View {
        TabView {
        
    NavigationView {
                
        Text("Tab bar test")
            .navigationBarTitle("Page One")
    }
}
    .tabItem {
        Image(systemName: "1.circle")
        Text("Home")
    }
}

It builds fine but the tab bar doesn't show up.

My primary question which I'm hoping would be useful to others, is ...

Why can't I make a make a Navigation View a tab bar item by nesting .tabItem directly inside the Navigation View (as per my first example)?

I think it's a similar question to this one but there's no code there. And then quite similar to this one but they seem to be using .tabItem directy with ContentView like I want to with NavigationView but that isn't building!?

I'm probably misunderstanding something simple but I don't get this at all at the moment.

score 7 · Answer 1 · answered Oct 12 '21 at 06:26

Do this for a better overview:

ContentView:

struct ContentView : View {
        var body: some View {
            TabView {

            FirstView()
                .tabItem { 
                    Image(systemName: "folder.fill")
                    Text("Home")
                }

            SecondView()
                .tabItem { 
                    Image(systemName: "folder.fill")
                    Text("SecondView")
                }

                
            }
        }
    }

FirstView

struct FirstView: View {
                var body: some View {

                    NavigationView {
                            Text("FirstView")
                                .navigationBarTitle("Home")
                        }

                    }
                }
            }

SecondView

   struct SecondView: View {
      var body: some View {

          NavigationView {
                  Text("SecondView")
                      .navigationBarTitle("Home")
              }

          }
      }
  }

score 5 · Accepted Answer · answered Apr 23 '21 at 22:09

.tabItem should be used as a modifier on the view that represents that tab.

In the first example, this doesn't work because of a syntax error -- you're trying to use it on the opening of a closure in NavigationView {, when instead you want it on the outside of the closing brace: NavigationView { }.tabItem(...)

In the second example, you're using .tabItem as a modifier on the entire TabView instead of the NavigationView.

Both of your examples may have revealed what was going on more obviously if you indent your code so that you can see the hierarchy. Trying selecting your code in Xcode and using Ctrl-I to get Xcode to properly format it for you.

Here's a working version:

struct ContentView : View {
    var body: some View {
        TabView {
            NavigationView {
                Text("Tab bar test")
                    .navigationBarTitle("Page One")
            }
            .tabItem { //note how this is modifying `NavigationView`
                Image(systemName: "1.circle")
                Text("Home")
            }
            
        }
    }
}

thanks so much - okay I see now, so just so I'm clear. We're saying that, by adding the .tabItem AFTER the closing braces of the NavigationView, it is a modifier for the NavigationView? Thanks for the Xcode formatting tip sorry I will do that in future! — nc14, Apr 23 '21 at 22:11
Sorry you've actually noted this in the code example - thanks again — nc14, Apr 23 '21 at 22:12
Yes, that is correct. Same concept as if you were editing a view without a trailing closure, like `Text("Hello, world!").foregroundColor(.red)` where the modifier goes *after* the `View` it is modifying. — jnpdx, Apr 23 '21 at 22:15

NavigationView inside a TabView Swift UI

2 Answers2

Do this for a better overview:

Linked