SwiftUI navigationBarItems disappear in TabView

Max B Published at Dev

Max B

I have a view that has navigation bar items and I embed that view in a TabView. But when doing that, the bar items no longer appear. If I call the view outside of a TabView everything works as expected.

Below a small sample project to illustrate my issue, note that the TabView is not called on the initial ContentView but later down:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            NavigationLink(destination: WarehouseOrderTabView()){
                Text("Click me")
            }
        }
    }
}

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

struct WarehouseOrderTabView: View {
    var body: some View {
        TabView{
            TabView1().navigationBarTitle("Dashboard")
                .tabItem {
                    Image(systemName: "gauge")
                    Text("Dashboard")
            }

            TabView2().navigationBarTitle("Orders")
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("Orders")
            }
        }
    }
}

struct TabView1: View {
    var body: some View {
        Text("TabView 1")
            //I would expect to see those bar items when displaying tab 1
            .navigationBarItems(trailing: (
                HStack{
                    Button(action: {
                    }, label: {
                        Image(systemName: "arrow.clockwise")
                            .font(.title)
                    })
                        .padding(.init(top: 0, leading: 0, bottom: 0, trailing: 20))
                    Button(action: {

                    }, label: {
                        Image(systemName: "slider.horizontal.3")
                            .font(.title)
                    })
                }
            ))
    }
}

struct TabView2: View {
    var body: some View {
        Text("TabView 2")
    }
}

What am I missing here?

rajhraval1

A NavigationView can be embedded in a TabView and not vice-versa.

TabView contains different tabItem() (at most 5) that can contain your views.

This is how you can use it.

TabView1.swift

struct TabView1: View {
    var body: some View {
        NavigationView {
            Text("TabView 1")
                .navigationBarTitle("Dashboard")
                .navigationBarItems(trailing:
                    HStack {
                        Button(action: {
                            // more code here
                        }) {
                            Image(systemName: "arrow.clockwise")
                                .font(.title)
                        }
                        Button(action: {
                            // more code here
                        }) {
                            Image(systemName: "slider.horizontal.3")
                                .font(.title)
                        }
                    }
                )
        }
    }
}

TabView2.swift

struct TabView2: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: YourNewView()) {
                Text("TabView 1")
            }
            .navigationBarTitle("Orders")
        }
    }
}

ContentView.Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            TabView1()
               .tabItem {
                   Image(systemName: "gauge")
                   Text("Dashboard")
               }
            TabView2()
               .tabItem {
                   Image(systemName: "list.dash")
                   Text("Orders")
               }
        }
    }
}

Hope it helps :)

Collected from the Internet

Please contact [email protected] to delete if infringement.