SwiftUI - How can I set individual customized toolbars/TopBars for each tabItem in a TabView when navigating from another View?

Question

Scenario:

I have a login screen with a "Enter button", as the picture shown below: Login Screen. The code, in its simplest form, is:

NavigationStack{
        // Contains BG and rest of elements
        ZStack{
            Image("LoginBG")
            .resizable()
            .ignoresSafeArea(.all)
            
        VStack {
                Image("")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 150, height: 150)
                    .padding()
 
             NavigationLink(destination: RootTabView().navigationBarBackButtonHidden(true)){
                 
                 Text("Enter")
                 .frame(maxWidth: 200)
                 .bold()
                 
             }
             .buttonStyle(.borderedProminent)
             .tint(Color(red: 6/100, green: 36/100, blue: 42/100))
     
        } // Vstack
        } // ZStack
}

After clicking Enter, it takes me to a TabView, with some Items. Code as follows:

TabView {
        
        Profile()
        .tabItem {Label("Profile", systemImage: "person.crop.circle")}
        
        MyEvents()
        .tabItem {Label("My Events", systemImage: "house")}
        
        SearchEvents()
        .tabItem {Label("Search", systemImage: "magnifyingglass")}
        
        Rating()
        .tabItem {Label("Rating", systemImage: "bell")}
        
        Settings()
        .tabItem {Label("Settings", systemImage: "gear")}
        
    }

The TabView contains, for example, the Profile view. This view looks like this: Profile Screen with title and the code is like this:

NavigationStack{
    VStack {
        Image("ProfileBG")
        .resizable()
        .clipShape(Circle())
        .ignoresSafeArea(.all)
        .frame(maxWidth: 100,maxHeight: 100)
        .padding()
        .padding()
        .navigationTitle("Profile")
        
        Text("User").bold()
        Text("@AppUser")
        
        HStack{
            VStack {
                Text("Events Created").bold()
                Text("0")
            }
            
            Spacer()
            
            
            VStack {
                Text("Events Joined").bold()
                Text("0")
            }
            
            
        }
        .padding()
        .frame(width: 330)
    }
    }

Problem:

When I navigate from Login View to the TabView, the Profile TabView item shows as follows: Profile without title bar.

As you can see, the Toolbar (or UINavigationBar in UIKit) is not appearing when I navigate from the Login screen to the TabView.

Objective:

I would like to have a customized toolbar with different background colors and titles individually in each tabItem

I have tried to set the toolbar is all the possible ways available, but either I cannot change the toolbar title when navigationBarTitleDisplayMode is set to.large. And .inline isn't my preferred one.

I've tried to look for answers in google, stack overflow, but it's not that common. Can anyone help me?

Thanks in advance.

Answer 1

First of all, remove NavigationStack from the Profile because parent view has already NavigationStack. Remove navigation title from the Profile and set RootTabView's Navigation Title dynamically as below:

struct RootTabView: View {
    @State private var navigationTitle: String = "Profile"
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            Profile()
                .tabItem { Label("Profile", systemImage: "person.crop.circle") }
                .tag(0)

            MyEvents()
                .tabItem { Label("My Events", systemImage: "house") }
                .tag(1)

            SearchEvents()
                .tabItem { Label("Search", systemImage: "magnifyingglass") }
                .tag(2)

            Rating()
                .tabItem { Label("Rating", systemImage: "bell") }
                .tag(3)

            Settings()
                .tabItem { Label("Settings", systemImage: "gear") }
                .tag(4)
        }
        .onChange(of: selectedTab) {
            print(selectedTab)
            switch selectedTab {
                case 0:
                    navigationTitle = "Profile"
                case 1:
                    navigationTitle = "My Events"
                case 2:
                    navigationTitle = "Search Events"
                case 3:
                    navigationTitle = "Rating"
                case 4:
                    navigationTitle = "Settings"
                default:
                    break
            }
        }
        .navigationTitle(navigationTitle)
    }
}

Change the NavigationBar appearance by adding below code to your SwiftUI APP:

@main
struct StackOverflowAnsApp: App {
    init() {
        let appearence = UINavigationBarAppearance()
        let attributes: [NSAttributedString.Key: Any] = [
            .font: UIFont.systemFont(ofSize: 24)
        ]
        appearence.titleTextAttributes = attributes
        appearence.largeTitleTextAttributes = attributes
        appearence.backgroundColor = .secondarySystemBackground

        UINavigationBar.appearance().standardAppearance = appearence
        UINavigationBar.appearance().compactAppearance = appearence
        UINavigationBar.appearance().scrollEdgeAppearance = appearence
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Output: