ios – SwiftUI TabView including unusual clean area beneath view?

I’m utilizing a tab view to vary screens in my app. I’m additionally utilizing a customized tab bar that I created to navigate with.

The issue I’ve is the tab view looks as if it is making a random clean area beneath itself. I can not determine if it is the customized tab view or not.

IMPORTANT: One factor to notice is that if you happen to click on anyplace within the clean area it is going to really navigate by means of the views – so it looks as if it’s really an invisible tab bar?

Beneath are screenshots of the difficulty:

HomeScreen

MapView

ContentView:

struct ContentView: View {

@State var selectedTab = 0

var physique: some View {
    VStack {
        TabView(choice: $selectedTab) {
            MyGarageView().tag(0)
            FuelView().tag(1)
            FinderView().tag(2)
        }
    }
    ZStack{
        HStack{
            ForEach((TabbedItems.allCases), id: .self){ merchandise in
                Button{
                    selectedTab = merchandise.rawValue
                } label: {
                    CustomTabItem(imageName: merchandise.iconName, title: merchandise.title, isActive: (selectedTab == merchandise.rawValue))
                }
            }
        }
        .padding(6)
    }
    .body(peak: 75)
    .cornerRadius(15)
    .padding(.horizontal, 26)
  }    

}

CustomTabBarView:

enum TabbedItems: Int, CaseIterable{
    case myGarage = 0
    case gas
    case map


var title: String{
    change self {
    case .myGarage:
        return "Storage"
    case .gas:
        return "Gas"
    case .map:
        return "Finder"
    }
}

var iconName: String {
    change self {
    case .myGarage:
        return "storage"
    case .gas:
        return "gas"
    case .map:
        return "map"
    }
  }
}

extension ContentView {
func CustomTabItem(imageName: String, title: String, isActive: Bool) -> some View {
    HStack(spacing: 10){
        Spacer()
        Picture(imageName)
            .resizable()
            .renderingMode(.template)
            .foregroundColor(isActive ? .white : .grey)
            .body(width: 20, peak: 20)
        if isActive{
            Textual content(title)
                .font(.system(measurement: 14))
                .foregroundColor(isActive ? .white : .black)
        }
        Spacer()
    }
    .body(width: isActive ? 150 : 60, peak: 60)
    .background(isActive ? .black : .clear)
    .cornerRadius(15)
  }
}

I’ve tried hiding the tab view to no avail.

I’ve additionally tried taking part in round with the frames which had no impact.

I can not see the difficulty and different posts / articles didn’t assist both. I am caught 🙁