Having Tab bar and Navigationbar in the same View in SwiftUI?

Question

I'm trying to learn SwiftUI and I'm wondering its possible to have both Navigation bar and a Tabbar in the same project?

I currently have a tabbar but I need to to have a Navigation bar with some buttons and a logo in the middle.

How do I achieve this?

This is my current code:

struct ContentView: View {
    var body: some View {
        
        TabView {
             NavigationView{
                 FirstView()
             }
             .tabItem {
                 VStack{
                    Image(systemName: "house.fill")
                    Text("Home")
                 }
             }
             
             NavigationView{
                 SecondView()
             }
             .tabItem {
                 VStack{
                     Image("second")
                     Text("Second")
                 }
             }
         }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

@Asperi, I only have a Tab Bar at the bottom of the screen. I need a Navigation bar at the top of the screens too. — drago, Jan 29 '21 at 13:31
https://stackoverflow.com/questions/31548909/swift-how-do-i-add-tab-bar-and-navigation-bar-to-a-single-view-controller — Wings, Jan 29 '21 at 13:36

score 3 · Accepted Answer · answered Jan 29 '21 at 13:45

Use the following component navigationBarItems, navigationBarTitle, toolbar and ToolbarItem

struct ContentViewTab: View {
    var body: some View {
        
        TabView {
            NavigationView{
                Color.red
                    .navigationBarTitle("Home", displayMode: .inline)
                    .toolbar {
                        ToolbarItem(placement: .principal) {
                            Image(systemName: "star.fill")
                        }
                    }
                    .navigationBarItems(leading: Button("Left") {}, trailing: Button("Right") {})
            }
            .tabItem {
                VStack{
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            }
            
            NavigationView{
                Color.green
                    //                    .item
                    .navigationBarTitle("Second", displayMode: .inline)
            }
            .tabItem {
                VStack{
                    Image("second")
                    Text("Second")
                }
            }
        }
        
    }
}

score 1 · Answer 2 · answered Jan 29 '21 at 13:38

Here is a possible solution. Tested with Xcode 12.4 / iOS 14.4

struct ContentView: View {
    var body: some View {
        TabView {
             NavigationView{
                 FirstView()
                   .navigationBarTitle("First", displayMode: .inline)  // << !!
             }
             .tabItem {
                 VStack{
                    Image(systemName: "house.fill")
                    Text("Home")
                 }
             }
             
             NavigationView{
                 SecondView()
                   .navigationBarTitle("Second", displayMode: .inline) // << !!
             }
             .tabItem {
                 VStack{
                     Image("second")
                     Text("Second")
                 }
             }
         }
        
    }
}

Having Tab bar and Navigationbar in the same View in SwiftUI?

2 Answers2

Linked

Related