How to hide tab bar swift ui ios

Question

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

In your switch code apply toolbar only to the index you want — user1046037, Nov 11 '22 at 18:17
If you hide the toolbar how will you navigate to your other view? — user1046037, Nov 11 '22 at 18:57

user1046037 · Accepted Answer · 2022-11-11T19:20:17.650

0

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

edited Nov 11 '22 at 19:20

answered Nov 11 '22 at 18:59

user1046037

16,755
12
92
138

in my profile view, I have a logout button, when I click the button I want to go to a separate view (nor to menu or profile view) to another different view from the app, a login view, that should not contain the toolbar – Nov 11 '22 at 19:15
See if the updated code helps – user1046037 Nov 11 '22 at 19:20
It is working!!! Thank you! But when you do **.fullScreenCover**, what happen to the others views? – Nov 11 '22 at 19:29
`.fullScreenCover` doesn't affect other views, it only is applicable for the login view. `.fullScreenCover` is used so that the login screen fully covers the screen. Normally we would use `.sheet` for modal but that wouldn't cover the entire screen. – user1046037 Nov 11 '22 at 19:32
So the other screens wont close? I will still have the data there from the menu, profile views? – Nov 11 '22 at 19:33
Please watch the WWDC SwiftUI videos to learn the basics of SwiftUI. As much as possible use standard view, but you need to know what is available. Press Command Shift L to see what is already available (Views / Modifiers etc). Learning the basics before building apps will help you in the long run – user1046037 Nov 11 '22 at 19:35
Login view just slides up, play around with it and make changes ... I think it is a starting point – user1046037 Nov 11 '22 at 19:36
Navigation Stack is only available for ios 16... – Nov 13 '22 at 19:27
need something for ios 15 too – Nov 13 '22 at 19:27
use @available and use `NavigationView` for iOS 15 – user1046037 Nov 13 '22 at 19:32
The problem with this tab bar is that the saving remains between views, for example if I switch from view 1 to 2, when I switch back to view 1, the things changed remain saved, the view does not reset – Nov 13 '22 at 21:15
The selection is stored in `selection` so set it when ever you like `onAppear` / `onDisappear` or what ever event you want. IMHO it would be best if you learn the fundamentals before jumping into app development. In the long run it will really help you know the basics, start with Apple tutorials ... WWDC has some great content for SwiftUI, start with https://developer.apple.com/wwdc20/10119 – user1046037 Nov 13 '22 at 21:23

How to hide tab bar swift ui ios

1 Answers1

Approach

Code

Login

Tab

Content