SwiftUI hidesBottomBarWhenPushed equivalent?

Question

AlexandreCools OP

Created Jul ’22

Replies 3

Boosts 1

Views 2.5k

Participants 2

Hello,

I'm trying to hide my TabView when I push a new view in my NavigationView but for now it seems that there is no way to do it (I saw a lot of thing on Internet, but nothing seems work properly for me)?

By default my code look like this:

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                view1
            }
            .tabItem {
                Image(systemName: "house.fill")
                Text("Home")
            }
            
            NavigationView {
                view2
            }
            .tabItem {
                Image(systemName: "bookmark.circle.fill")
                Text("Bookmark")
            }
        }
        .accentColor(.red)
    }
    
    private var view1: some View {
        List {
            NavigationLink {
                DetailsView()
            } label: {
                Text("View 1")
            }
        }
        .navigationTitle("View 1")
    }
    
    private var view2: some View {
        List {
            NavigationLink {
                DetailsView()
            } label: {
                Text("View 2")
            }
        }
        .navigationTitle("View 2")
    }
}

struct DetailsView: View {
    var body: some View {
        EmptyView()
    }
}

But then, I don't have any solution to hide my TabView, so I try something like this in my ContentView:

var body: some View {
    NavigationView {
        TabView {
            view1
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
                .navigationTitle(Text("title"))
                
            view2
                .tabItem {
                    Image(systemName: "bookmark.circle.fill")
                    Text("Bookmark")
                }
                .navigationTitle(Text("title"))
        }
        .accentColor(.red)
    }
}

Now, the hide on push is working, but it cause some glitch in the navigation bar and I can't set multiple navigationTitle (one for each view) like I did before; I can set only one navigationTitle for the NavigationView.

To solve the NavigationView title, I found a workaround by using a @State variable, but it remains this glitch on the navigation bar: sometimes the navigation view background is working, sometimes it's not working and sometimes I have a spacing between the title and the content (like in the Bookmark tab):

What am I doing wrong?

Does it exist any solution for this issue (hidesBottomBarWhenPushed + navigation bar glitch) ?

Thanks,

Alexandre

Boost

Answer 1

southbayjt OP

Jul ’22

What if you do it like this? So the TabView is embedded in a specific set of pages, and when you navigate to the details page, it's not part of the TabPage hierarchy?

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            HomeViewWithTabs()
        }
    }
}

struct HomeViewWithTabs: View {
    var body: some View {
        TabView {
            TabPage1()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Home")
                }
            TabPage2()
                .tabItem {
                    Image(systemName: "bookmark.circle.fill")
                    Text("Bookmark")
                }
        }
    }
}

struct TabPage1: View {
    var body: some View {
        VStack {
            Text("I am tab page 1")
                .padding()
                .background(.red)

            NavigationLink {
                DetailsView()
            } label: {
                Text("Click me to go to the details view")
            }
        }
    }
}

struct TabPage2: View {
    var body: some View {
        Text("I am tab page 2")
            .padding()
            .background(.green)
    }
}

struct DetailsView: View {
    var body: some View {
        Text("I am the details view")
    }
}

0

Answer 2

AlexandreCools OP

Aug ’22

Hi @southbayj,

Thanks for you answer.

I tried to do that, but because you have only one NavigationView, you also have only one title. So if you set a title to your NavigationVIew, you can't edit it anymore.

To fix this, I tried to use a @State variable, and at first it was working, but then I have some UI glitch with the NavigationView (like in my GIF).

So it was not a solution for me...

0

Answer 3

AlexandreCools OP

Apr ’23

Update : Something exist on iOS 16+ with SwiftUI : you can use the modifier .toolbar(.hidden, for: .tabBar).

Here's an example :

struct ContentView: View {
    var body: some View {
        TabView {
            view1
                .tabItem { Label("View 1", systemImage: "house") }
            view2
                .tabItem { Label("View 2", systemImage: "square.and.pencil") }
        }
    }
    
    var view1: some View {
        NavigationStack {
            NavigationLink("Push") {
                Text("View 2!")
                    .toolbar(.hidden, for: .tabBar)
            }
        }
    }
    
    var view2: some View {
        NavigationStack {
            Text("Another view")
        }
    }
}

It works, but it's not perfect :

the tab view disappear without any animation (with UIKit the tab view was going with the view who disappear)
wen you go back to the previous view, the tab view come back after the view appeared (who move all of your content to the top)

In video :

Simulator Screen Recording - iPhone 14 Pro - 2023-04-07 at 12.04.07.gif

1