Search code examples
swiftswiftuiswiftui-navigationlinkswiftui-navigationviewswiftui-tabview

How to hide tab bar swift ui ios


I implemented my own tab bar:

struct MainView: View
{
    @State var selectedIndex = 0
    let icons = ["menucard", "house"]
    let iconsNames = ["meniu", "oferte"]


var body: some View{
    
    VStack(spacing: 0){

        ZStack{
            switch selectedIndex{
            case 0:
                MeniuListView()
            case 1:
                ProfileView()
              }

        Divider()
        HStack{
            ForEach(0..<2, id: \.self){number in
                Spacer()
                Button(action: {
                    self.selectedIndex=number

                }, label: {
                    VStack(spacing: 3){
                    Image(systemName: icons[number])
                            .font(.system(size: 25,
                                         weight: .regular,
                                         design: .default))
                           
                 }
              }
          }
}

Now the question is how I can hide it if I want to go to a specific view? What is the best approach to do so? For example I want to navigate to a login page, but the tab bar does not hide..

This is my ProfileView() that call the login page but the tab bar does not disappear.. How I can hide it? ProfileView code:

struct ProfileShopView: View {
       @State var goToNextScreen : Int? = nil
        var body: some View {
              NavigationView{
    
                   VStack{
        
                       Form{
                           }
                 
                    NavigationLink(destination: LoginView().navigationBarHidden(true), tag: 1, selection: $goToNextScreen)
                           {    
                              EmptyView()
                           }
                      Button(action: {
                
                           goToNextScreen=1
                           UserDefaults.standard.set(false, forKey: "isLogin")
                
                      } //need to hide the tab bar when navigating to login view
          }
    }

Solution

  • Approach

    • Use a full screen cover for login view
    • After sign in login view is dismissed
    • Use a tab bar
    • Tap on logout show login view again

    Code

    Login

    struct LoginView: View {
        @Environment(\.dismiss) private var dismiss
        var body: some View {
            ZStack {
                Color.yellow
                Button("Sign in") {
                    dismiss()
                }
                .buttonStyle(.bordered)
            }
            .ignoresSafeArea()
        }
    }
    

    Tab

    enum TabContent: Int {
        case menu
        case profile
    }
    
    

    Content

    struct ContentView: View {
        
        @State private var selection = TabContent.menu
        @State private var isLoginShown = true
        
        var body: some View {
            NavigationStack {
                TabView(selection: $selection) {
                    Text("Menu list")
                        .tabItem {
                            Label("Menu", systemImage: "list.bullet")
                        }
                        .tag(TabContent.menu)
                    
                    VStack {
                        Text("Profile view")
                        Button("Logout") {
                            isLoginShown = true
                        }
                    }
                    .tabItem {
                        Label("Profile", systemImage: "person.crop.circle")
                    }
                    .tag(TabContent.profile)
                }
            }
            .fullScreenCover(isPresented: $isLoginShown) {
                LoginView()
            }
        }
    }