How do I remove blank lines at the top and bottom in TabView? I have cases with different screens, and depending on the icon, I want to navigate to these screens using coordinator for navigation.
This is how it looks like:

import SwiftUI

struct TabBarCoordinatorView: View {
    
    @ObservedObject var coordinator: TabBarCoordinator
    
    var body: some View {
        
        ZStack {
            VStack {
                
                TabView(selection: $coordinator.selectedTab) {
                    NavigationView {
                        HomeView(
                            viewModel: HomeViewModel()
                        )
                        .background(Color.black.opacity(0.5))
                        .navigationViewStyle(.stack)
                    }
                    .tag(0)
                    
                    NavigationView {
                        FavouriteView()
                            .navigationViewStyle(.stack)
                    }
                    .tag(1)
                    .background(Color.white)
                    NavigationView {
                        CategoryView()
                            .navigationViewStyle(.stack)
                    }
                    .tag(2)
                    .background(Color.white)
                    NavigationView {
                        SettingsView()
                            .navigationViewStyle(.stack)
                    }
                    .tag(3)
                }
                Spacer()
                toolbar
            }
        }
    }
}

extension TabBarCoordinatorView {
    func customTabBar(imageName: Image, title: String, isActive: Bool) -> some View {
        HStack(spacing: 5) {
            Spacer()
            imageName
                .resizable()
                .renderingMode(.template)
                .foregroundColor(isActive ? .black : .gray)
                .frame(width: 20, height: 20)
            if isActive {
                Text(title)
                    .font(.system(size: 14))
                    .foregroundColor(isActive ? .black : .gray)
            }
            Spacer()
        }
        .frame(width: isActive ? .infinity : 100, height: 60)
        .background(isActive ? .customGray.opacity(0.4) : .clear)
        .cornerRadius(30)
    }
    
    var toolbar: some View {
        HStack {
            ForEach((TabBarCoordinator.Tab.allCases), id: .self) { item in
                Button {
                    coordinator.selectedTab = item.rawValue
                } label: {
                    customTabBar(imageName: item.iconName, title: item.title, isActive: (coordinator.selectedTab == item.rawValue))
                }
            }
        }
    }
}

#Preview {
    TabBarCoordinatorView(coordinator: .init())
}

My coordinator

import Foundation
import SwiftUI

final class TabBarCoordinator: ObservableObject {
    
    // MARK: Route
    
    enum Route {}
    
    var route: Route?
    
    // MARK: Tabs
    
    enum Tab: Int, CaseIterable {
        case home = 0
        case favorite
        case category
        case settings
        
        var title: String {
            switch self {
            case .home:
                return "Home"
            case .favorite:
                return "Favorite"
            case .category:
                return "Category"
            case .settings:
                return "Settings"
            }
        }
        var iconName: Image {
            switch self {
            case .home:
                return Image.home
            case .favorite:
                return Image.heart
            case .category:
                return Image.category
            case .settings:
                return Image.setting
            }
        }
    }
        
    @Published var selectedTab = 0
}

But when I navigate, there are blank lines at the top and bottom of the screen. How can I remove them?

This now