SwiftUI, White space between view and tabbar

Question

There is this mysterious white space between my view and custom tabbar which I cannot seem to remove with .edgesIgnoreSafeArea or .ignoreSafeArea. Does someone else experience the same problem/have a solution for this?

I tried using different techniques and code but nothing seems to be working. I have added a label inside a VStack with a grey background to make the issue more visible. Please have a look and let me know if this might be a bug or an issue on my end.

My code:

  import SwiftUI

    struct MotherView : View {
        @EnvironmentObject var viewRouter: ViewRouter
    
    var body: some View {
        
        
        GeometryReader { geometry in
            
            VStack {
            
                
                    switch viewRouter.currentPage {
                    case .home:
                        
                                            
                        VStack {
                            Text("hello world")
                        }
                        .edgesIgnoringSafeArea(.bottom)
                        .frame(width: geometry.size.width, height: geometry.size.height - 50)
                        .background(Color(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)))
                        
                        
                    case .search:
                        SearchView()
                        
                    case .favorites:
                        FavoriteView(fontSize: 12.0)
        

                    
                        case .settings:
                            SettingsView()
                            
                            
                    
    
    }
                    
                Spacer()
                    
            
                

                

    VStack {

                    Divider().ignoresSafeArea()

                    HStack {
                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "house", sytemFillIcon: "house.fill", tabName: "Home", assignedPage: .home)

                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "magnifyingglass", sytemFillIcon: "magnifyingglass", tabName: "Search", assignedPage: .search)

                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "bookmark", sytemFillIcon: "bookmark.fill", tabName: "Favorites", assignedPage: .favorites)

                        tabbarIcon(width: geometry.size.width, height: geometry.size.height, systemIconName: "gearshape.2", sytemFillIcon: "gearshape.2.fill", tabName: "Settings", assignedPage: .settings)
                    }
                    .frame(width: geometry.size.width, height: geometry.size.height/10)




                }
            
            
            
                
                
            
                
                
                
            }
            .edgesIgnoringSafeArea(.bottom)
            
            
        }
    }
}



    struct tabbarIcon: View {
    
    @State var scale : CGFloat = 1
    @EnvironmentObject var viewRouter: ViewRouter
    let width, height: CGFloat
    let systemIconName,sytemFillIcon, tabName: String
    let assignedPage: Page
    
    var body: some View {
        
        
            Button(action:{
                
                if viewRouter.currentPage != assignedPage {
                    viewRouter.currentPage = assignedPage
                }
                
                
                
                
            } ){
                VStack {
                    
                    
                    ZStack {
                        
                        Image(systemName: sytemFillIcon)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .opacity(viewRouter.currentPage == assignedPage ? 1 : 0)
                        
                        Image(systemName: systemIconName)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .opacity(viewRouter.currentPage == assignedPage ? 0.0 : 1)
                        
                        
                        
                        
                    }
                    
                    
                    
                    //4 icons so /4 of the width of the screen.
                    .frame(width: width/4, height: height/40)
                    
                    Spacer()
                    
                }
                .foregroundColor(viewRouter.currentPage == assignedPage ? Color("ShadowCard") : Color("Accentgreen"))
                
            }
        
            //Scaling effect when pressed
            .buttonStyle(ScaleButtonStyle())
            
            
        
        
        
        
    }
}


    struct ScaleButtonStyle: ButtonStyle {
        func makeBody(configuration: Self.Configuration) -> some View {
            configuration.label
                .scaleEffect(configuration.isPressed ? 0.8 : 1)
                .animation(.spring(response: 0.15, dampingFraction: 0.6, blendDuration: 1.5))
                
        }
    }

Screenshot: mysterious white space

Answer 1

It is because all VStacks have a default spacing between elements. Replace all your problematic VStack { ... } with:

VStack(spacing: 0) { 
    ...
}

However, to place a "TabBar" it is recommendable to use a ZStack instead to a VStack.

ZStack(alignment: .bottom) {
    
    ContentView()
    TabBar()

}