SwiftUI Toolbar In a TabBar View

Question

My first view has a NavigationView with a Tab Bar View

struct TestView: View {
    var body: some View {
        NavigationView {
            TabTestView()
        }
    }
}

In the Tab Bar, I have two views, say TestView1 and TestView2.

struct TabTestView: View {
    var body: some View {
        TabView {
            TestView1()
                .tabItem {
                    Label("Test 1", systemImage: "list.dash")
                }
            TestView2()
                .tabItem {
                    Label("Test 2", systemImage: "plus")
                }
        }
    }
}

I now need to add a toolbar button to TestView1. Here is my attempt to do so:

struct TestView1: View {
var body: some View {
    Text("Hello World")
        .navigationTitle("Test View 1")
        .toolbar {
              ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Save") {
                        print("Toolbar button click")
                    }
                  }
        }
    }
}

While this adds the Navigation Title to the page, the toolbar button is not added, as shown in the screenshot below:

If I, however, add the toolbar to the TabTestView, as below, the toolbar button does show up.

struct TabTestView: View {
    var body: some View {
        TabView {
            TestView1()
                .tabItem {
                    Label("Test 1", systemImage: "list.dash")
                }
            TestView2()
                .tabItem {
                    Label("Test 2", systemImage: "plus")
                }
        }
        .toolbar {
              ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Save") {
                        print("Toolbar button click")
                    }
                  }
        }
    }
}

This is a problem - the code to be executed on the button click depends upon variables in TestView1, and adding the toolbar to the TabTestView doesn't feel right, semantically the toolbar "belongs" in TestView1.

Any thoughts would be greatly appreciated.

Why can't you add the toolbar button in your TestView1 itself? You haven't said what is prevention you there, nor have you provided that code. Please see: [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). — Yrb, Oct 27 '21 at 12:44
Thank you very much, Yrb, for your feedback - I have edited the writeup to include the complete code, along with screenshots. — bridgenbarbu, Oct 28 '21 at 05:07

Yrb · Accepted Answer · 2021-10-28T13:00:00.833

Once I had working code, I realized I had seen this before. It appears to be a bug in SwiftUI. TabView and NavigationView don't play well together. You will find a lot of my answer will say one NavigationViews at the top of the view hierarchy, which is what you have done. That will not work in this instance. The workaround is to put a NavigationViews in each of the views in the tabs separately for this to work. You will still get all of the correct NavigationViews behavior for each of those hierarchies, but it is duplicative. I don't think I ever filed a Radar on it, but I will today and will post the Radar number here.

struct TestView: View {
    var body: some View {
        // NavigationView { //Remove this NavigationView
            TabTestView()
        // }
    }
}

struct TabTestView: View {
    var body: some View {
        TabView {
            TestView1()
                .tabItem {
                    Label("Test 1", systemImage: "list.dash")
                }
            TestView2()
                .tabItem {
                    Label("Test 2", systemImage: "plus")
                }
        }
    }
}

struct TestView1: View {
    var body: some View {
        NavigationView { // Add here
            Text("Hello World 1")
                .navigationTitle("Test View 1")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            print("Toolbar button click")
                        }
                    }
                }
        }
    }
}


struct TestView2: View {
    var body: some View {
        NavigationView { // Add here
            Text("Hello World 2")
                .navigationTitle("Test View 2")
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button("Save") {
                            print("Toolbar button click")
                        }
                    }
                }
        }
    }
}

The Radar number is FB9727010.

SwiftUI Toolbar In a TabBar View

1 Answers1