In SwiftUI, how to hide tab bar when a list is tapped to show a new view (without the tab bar)?

Question

Created Oct ’19

Replies 7

Boosts 0

Views 1.0.0k

Participants 10

This List in the first page of a tab view. When a cell is tapped, I want to show a new ChatRoomDetail view and hide tab bar. But I couldn't find a way in documentation. How should I do it? Thanks!

struct ChatList: View {

@State var showChatRoomDetail: Bool = false

var items: [ChatRoom]

var body: some View {

NavigationView {

List {

ForEach(self.items) { item in

NavigationLink(destination: ChatRoomDetail(currentMessage: "", chatRoom: item)){

Text(item.titleString)

}

Boost

Answer 1

sguerrera OP

Feb ’20

Hello,

Did you ever find a solution for this, I am facing the same issue as you.

Sergio

1

Answer 2

joshhaaronn OP

Apr ’20

still also looking for a solution for this

0

Answer 3

anthonius OP

Jul ’20

This is currently not feasible. If it is something you would like to see in the future, please try inform Apple from this link

0

Answer 4

DEHANG OP

Aug ’20

watching this to.

0

Answer 5

l_o_o_l OP

Aug ’20

I meet same problem.
And I do follow action to avoid it
But a little problem still live
That problem is I need use navigationBarTitle(self.selectTitle, displayMode: .inline)
can't use large title

Code Block struct AppTabNavigation: View {
  @State private var selection: Tab = .menu
  @State private var selectTitle: String = "menu"
  var body: some View {
    NavigationView {
      TabView(selection: $selection) {
        SmoothieMenu()
          .tabItem {
            Label("Menu", systemImage: "list.bullet")
              .accessibility(label: Text("Menu"))
          }
          .tag(Tab.menu)
         
        FavoriteSmoothies()
          .tabItem {
            Label("Favorites", systemImage: "heart.fill")
              .accessibility(label: Text("Favorites"))
          }
          .tag(Tab.favorites)
         
        RewardsView()
          .tabItem {
            Label("Rewards", systemImage: "seal.fill")
              .accessibility(label: Text("Rewards"))
          }
          .tag(Tab.rewards)
         
        RecipeList()
          .tabItem {
            Label("Recipes", systemImage: "book.closed.fill")
              .accessibility(label: Text("Recipes"))
          }
          .tag(Tab.recipes)
      }
      .navigationBarTitle(self.selectTitle, displayMode: .inline)
      .onChange(of: selection, perform: { value in
        print(value)
        switch value {
          case .menu:
            self.selectTitle = "menu"
        case .favorites:
          self.selectTitle = "favorite"
        case .rewards:
          self.selectTitle = "rewards"
        case .recipes:
          self.selectTitle = "recipes"
        }
      })
    }
  }
}

0

Answer 6

gcliu OP

Nov ’20

NavigationView {
TabView(selection: $selection) {}
}
It works

but

not good on the ipad , Mac

1

Answer 7

its_joeykay OP

Nov ’20

Placing the TabView in a NavigationView like @gcliu and @l_o_o_l mentioned works. In addition, to solve @l_o_o_l problem for the navigationBarTitle, all you need to do is pass the selection as the title, no need for the switch statement. Works if you specify your state variable as a string. And you can use large title with this solution.

Code Block languagestruct Dashboard: View {
  @State private var selection = "Cards"
   
  var body: some View {
    NavigationView {
      TabView(selection: $selection) {
        CardList()
          .tag("Cards")
          .tabItem {
            Image("cards")
            Text("Cards")
          }
        Text("Profile Page")
          .tag("Profile")
          .tabItem {
            Image("user")
              .foregroundColor(.black)
            Text("Me")
          }
      }
      .navigationBarTitle(self.selection)
    }
  }
}

NB: The CardList() view contains the NavigationLink for each card.

2