How to hide the TabBar when navigate with NavigationLink in SwiftUI?

Question

I have a TabView with 2 tabs in it, each tab containing a NavigationView. I need to hide the TabBar when navigating to another view. One solution would be to place the TabView inside of one NavigationView, but I have to set different properties for each NavigationView.

TabView(selection: $selectedTab, content: {
            NavigationView {
                VStack {
                    NavigationLink(destination: Text("SecondView Tab1")) {
                        Text("Click")
                    }
                }
            }.tabItem {
                Text("ONE")
            }.tag(0)

            NavigationView {
                VStack {
                    NavigationLink(destination: Text("SecondView Tab2")) {
                        Text("Click")
                    }
                }
            }.tabItem {
                Text("TWO")
            }.tag(1)

        })

P.S. I am using Xcode 11 Beta 5

Check this out https://github.com/smartvipere75/bottombar-swiftui — DogCoffee, Nov 06 '19 at 12:45
I posted one way to solve this limitation here: https://stackoverflow.com/a/62908095/6473671 — Rod, Jul 15 '20 at 05:26

score 27 · Answer 1 · answered Dec 12 '19 at 12:28

27

A little late but it will work, put your NavigationView before the TabView and the tab buttons are going to be hidden when you use a navigation link in your tabbed views.

NavigationView{
    TabView{
        ...
    }
}

answered Dec 12 '19 at 12:28

bbaulenas

287
3
4

best answer I found – kingnight Aug 18 '20 at 10:42
7

This has unintended consequences https://stackoverflow.com/q/64102087/196555 – daihovey Oct 06 '20 at 04:41

score 1 · Answer 2 · edited Aug 04 '20 at 11:57

I have same problem for this; And I did the following actions to solve this problem:

Use NavigationView Contain a TabView And Hidden the NavigationBar
Make a Custom NavigaitonView like this
In next view Still hidden NavigationBar

// root tab
NavigationView {
    TabView {
        // some
    }
    .navigationBarTitle(xxx, displayMode: .inline)
    .navigationBarHidden(true)
}

// custom navigation view
@available(iOS 13.0.0, *)
struct MyNavigationView: View {
    var body: some View {
        HStack {
            Spacer()
            Text(some)
            Spacer()
        }
        .frame(height: 44)
    }
}

// this view 
VStack {
                MyNavigationView()
                Image(some)
                    .resizable()
                    .frame(width: 100, height: 100, alignment: .top)
                    .padding(.top, 30)
                Spacer()
                HStack {
                    ClockView()
                    Spacer()
                    NavigationLink(
                        destination: DynamicList(),
                        label: {
                            Image(some)
                        }).navigationBarHidden(true)
                }
                .padding(EdgeInsets(top: 0, leading: 15, bottom: 0, trailing: 15))
                
                Spacer()
            }

// next view
var body: some View {
            VStack {
                List {
                    MyNavigationView()
                    ForEach(date, id: \.self) { model in
                        Text(model)
                    }
                }
                .navigationBarHidden(true)
                .navigationBarTitle(some, displayMode: .inline)
            }
    }

score -2 · Answer 3 · answered Aug 01 '19 at 20:51

-2

You can't hide the tab bar as far as I know if you navigation view its listed as a child, your tab bar contains your navigation view.

answered Aug 01 '19 at 20:51

Salvador Molina

315
4
17

2

I didn't downvote this myself, but my guess is that this is downvoted because this option is available in UIKit, so this behaviour should be available in SwiftUI – lewis Sep 04 '21 at 10:00

How to hide the TabBar when navigate with NavigationLink in SwiftUI?

3 Answers3

Linked