Home > Enterprise >  How to hide tab bar swift ui ios
How to hide tab bar swift ui ios

Time:11-12

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
          }
    }

CodePudding user response:

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()
        }
    }
}
  • Related