Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

ios

swiftui

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

like image 606
Sorin Lica Avatar asked Aug 01 '19 08:08

Sorin Lica


People also ask

How do I hide TabBar in SwiftUI?

If we want to hide the TabBar , we just write TabView into NavigationView , making the NavigationView the super-view and the TabView the child-view, which is just opposite to the above View Hierarchy .

How do I hide navigation links in SwiftUI?

The trick is to embed the NavigationLink and Text view in a ZStack . For the navigation link, instead of presenting the Text view, we change it to display an empty view. And, we attach the opacity modifier to NavigationLink and set its value to 0 .

How do I hide a tab view?

Right click on the tab you want to hide. Select Hide.

How do I hide the tab bar in Swift 4?

If you don't want that behavior, you should set hidesBottomBarWhenPushed to true where applicable. This will hide the tab bar along with any toolbars you had showing, but only when a view controller is pushed onto the navigation stack. This allows you to show the tab bar at first, then hide it when you need more room.


2 Answers

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{
        ...
    }
}
like image 167
bbaulenas Avatar answered Sep 21 '22 21:09

bbaulenas


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

  1. Use NavigationView Contain a TabView And Hidden the NavigationBar
  2. Make a Custom NavigaitonView like this
  3. 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)
            }
    }
like image 35
jiawei wang Avatar answered Sep 23 '22 21:09

jiawei wang