Taking Top Space When Adding Tab Bar in SwiftUI

Question

I am integrating Side Menu in my SwiftUI app. The side menu is working fine. The problem I am getting is I have a tab bar at the bottom, and when I open my side menu screen, it is taking some space from the top and I am not getting why it is getting that space. This is what I am getting:

And when I open Debug View Hierarchy, it is showing me this:

This is my code for my home screen:

struct HomeView: View {

@State var menuOpen: Bool = false

var body: some View {

Zstack {
  ZStack {
          HStack {
                                    
               if !self.menuOpen {
                           Button {
                                            
                               print("side menu tapped")
                               self.menuOpen.toggle()
                            } label: {
                                  Image("sideMenuButton")
                                      .resizable()
                                      .frame(width: 24, height: 24)
                                   }.padding()
                                }
                            Spacer()
                                  
                        }     
                     Text("Home")
                        .font(.custom(Poppins.semiBold.rawValue, size: 17))
                        .foregroundColor(Color(ColorName.appBlue.rawValue))
           }

       ZStack {
                SideMenu(width: 300,
                         isOpen: self.menuOpen,
                         menuClose: self.openMenu)
            }
       }     
      }.navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)

     func openMenu() {
           self.menuOpen.toggle()
      }
}

This is working fine when I use it without tab bar. Without tab bar it looks like this:

My code for tab bar controller is:

struct TabBarControllerView: View {
    
    @State private var tabSelection = 0
    
    var body: some View {
        TabView(selection: $tabSelection) {
            
            HomeView()
                .tabItem {
                    Label("Home", image: tabSelection == 0 ? ImageName.home.rawValue : ImageName.silverHome.rawValue)
                }
                .tag(0)

          MyAccountView()
                .tabItem {
                    Label("Claims", image: tabSelection == 1 ? ImageName.claims.rawValue : ImageName.silverClaims.rawValue)
                }
                .tag(1)

     }.accentColor(Color(ColorName.appBlue.rawValue))

 }
}

struct TabBarControllerView_Previews: PreviewProvider {
    static var previews: some View {
        TabBarControllerView()
    }
}

Does anyone knows why is it getting the top space? I tried .ignoresSafeArea() and also gave padding in negative, it went to top but the side menu did not tapping because it is getting under that space.

I am been stuck in this for 2 days, any help will be appreciated.

Answer 1

TabView comes with Navigation Bar up top. There is a simple solution by adding .navigationBarHidden(true).

See this post: SwiftUI how to hide navigation bar with TabView

Note: Also in the future give a proper minimum amount of code to reproduce the behavior. Your current code given relies on other components and isn't runnable by itself on a fresh project.

Update: I created a minimum project to test this and this code works fine with me:

import SwiftUI

@main
struct testApp: App {
    var body: some Scene {
        WindowGroup {
            TabBarView()
        }
    }
}

struct TabBarView: View {
    @State private var tabSelection = 0
    var body: some View {
        TabView(selection: $tabSelection) {
            HomeView()
                .tabItem {
                    Label("Home", systemImage: "house")
                }
                .tag(0)
        }
    }
}

struct HomeView: View {
    var body: some View {
        ZStack {
            Rectangle().foregroundColor(.green)

            VStack {
                HStack {
                    Spacer()
                    Button {
                        print("side menu tapped")
                    } label: {
                        Image(systemName: "pencil")
                            .resizable()
                            .frame(width: 24, height: 24)
                    }.padding()
                    Spacer()
                }
                Spacer()
            }
        }
    }
}

Given that this code works fine and the issue is not here, minimum working code sample is needed from OP.