How can I update the navigation title when I select a new tab?

Question

I have a tabview with three SwiftUIViews (HomeView, FavoritesView and ContactsView) each of these views look like this Home View below.

struct HomeView: View {
var body: some View {
    VStack {
        Image(systemName: "house.fill")
        Text("This is the Home View")
    }
}

}

My content view looks like this:

struct ContentView: View {
var body: some View {
    NavigationView {
        TabView {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house")
                        .navigationBarTitle("Home")
                }
            
            FavoritesView()
                .tabItem {
                    Label("Favorites", systemImage: "star")
                        .navigationBarTitle("Favorites")
                }
            
            ContactsView()
                .tabItem {
                    Label("Contacts", systemImage: "person")
                        .navigationBarTitle("Contacts")
                }
        }
    }
}

}

But when I run the app each tab get the same "Home" title for the navigation title.

How can I update the navigation title with the correct tab (without adding a navigation View in each SwiftUI Views) I believe we should be able to achieve this with only one nav view? Right???

Please post code, not pictures of code, which aren't searchable, copy/pastable, readable by screen readers, etc. — jnpdx, Jun 07 '21 at 21:15

score 2 · Accepted Answer · answered Jun 08 '21 at 00:49

//Create an enum for your options
enum Tabs: String{
    case home
    case favorites
    case contacts
}
struct TitledView: View {
    //Control title by the selected Tab
    @State var selectedTab: Tabs = .favorites
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                Text("HomeView()").tag(Tabs.home)
                    .tabItem {
                        Label("Home", systemImage: "house")
                    }
                    //Set the tag
                    .tag(Tabs.home)
                
                Text("FavoritesView()")
                    .tabItem {
                        Label("Favorites", systemImage: "star")
                            
                    }
                    //Set the tag
                    .tag(Tabs.favorites)
                
                Text("ContactsView()")
                    .tabItem {
                        Label("Contacts", systemImage: "person")
                    }
                    //Set the tag
                    .tag(Tabs.contacts)
                    
            }.navigationTitle(selectedTab.rawValue.capitalized)
        }
    }
}

How can I update the navigation title when I select a new tab?

1 Answers1