1

The structure of my swiftUI app navigation is as below

View : A
{

Navigation View {
     // List View on click 
     // Takes me to a Tab View
     NavigationLink(destination : Tab View)

}

}
View : Tab View
{
       ViewX 
            .tag(0)
            .tabItem {
                Image(systemName: "video.bubble.left.fill")
                Text("View X")
                    .font(Font.custom("Roboto-Black", size: 30))
            }
       ViewY 
            .tag(0)
            .tabItem {
                Image(systemName: "video.bubble.left.fill")
                Text("View Y")
                    .font(Font.custom("Roboto-Black", size: 30))
            }

}

With this structure I'm not able to control the navigation title of the view correctly. If I wrap each tab item in a navigation view, I end up with multiple navigation title bars as expected. Any particular approach (like hiding the root navigation bar) to have one navigation bar with appropriate title updates in nested views ?

  • Does this answer your question https://stackoverflow.com/a/59560140/12299030? Or this one https://stackoverflow.com/a/63115696/12299030? – Asperi Mar 19 '22 at 18:46
  • @Asperi no, in the other answers the entire tab view is enclosed in a navigation view unlike in my case where in the Tab view is a destination of a navigation link from the root view – Fareed khan Mar 19 '22 at 18:54

1 Answers1

1

you won't be able to update the navigation Title automatically you will need to do something like this:

import SwiftUI

enum Tabs: String {
    case view1
    case view2
}

struct tab: View {

@State var activeTab = Tabs.view1

var body: some View {
    TabView(selection: $activeTab)
    {
        Text("View1")
            .tag(Tabs.view1)
                .tabItem {
                    Image(systemName: "video.bubble.left.fill")
                    Text("View X")
                        .font(Font.custom("Roboto-Black", size: 30))
                }
               
        Text("View2")
            .tag(Tabs.view2)
                .tabItem {
                    Image(systemName: "video.bubble.left.fill")
                    Text("View Y")
                        .font(Font.custom("Roboto-Black", size: 30))
                }
             

    }
    .navigationTitle("Active View: \(activeTab.rawValue)")
}
}

enter image description here

  • thanks for the reply, works like a charm. Can I access the tool bar inside the View X or View Y to place buttons ? I tried using the .toolbar(content: { Button(action: { }) { Text("Log Out") } }) with no luck – Fareed khan Mar 20 '22 at 06:02
  • 1
    Think in this like a stack, the bar is binded to the tabview container, no the tabs inside, you would need to dinamyc update the outside bar and that could be troublesome. To fix that you could just add the buttons at the top of the views indide the tabs. Hope it helps. – Guillermo Jiménez Mar 20 '22 at 19:24