swiftuiswiftui-navigationlinkswiftui-navigationviewswiftui-tabview

SwiftUI navigation titles within TabView


For the reason outlined in the answer outlined in this question SwiftUI TabView brightness views vertical location the menu structure for my app is NavigationView -> TabView -> sub view with varying navigation titles.

The problem is that .navigationTitle gives one navigation title for the whole TabView rather than one for each sub view. How do I have multiple navigation titles with TabView, one for each sub-view?

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView {
                Text("Hello")
                    .navigationTitle("Title One")
                    .tabItem {
                        Image(systemName: "square.stack")
                }
                Text("Hello Again")
                    .navigationTitle("Title Two")
                    .tabItem {
                        Image(systemName: "checkmark.square")
                }
            }
        }
    }
}

Solution

  • We can define title depending on tab selection. Below is a simple demo of approach. Tested with Xcode 13 / iOS 15

    struct ContentView: View {
        @State var selection = 1
    
        var body: some View {
            NavigationView {
                TabView(selection: $selection) {
                    Text("Hello")
                        .tabItem {
                            Image(systemName: "square.stack")
                    }.tag(1)
                    Text("Hello Again")
                        .tabItem {
                            Image(systemName: "checkmark.square")
                    }.tag(2)
                }
                .navigationTitle(selection == 1 ? "First" : "Second") // << here !!
            }
        }
    }