Custom Tab Bar Doesn't Show in Header View

Question

I have created a custom header but it doesn't seem to show within my header view. It works perfectly within its own simulator and with the page it's linked to. The header View is then called in my Home View. I do feel like I have over complicated my tab bar so any advice on this too would be amazing

Swift Ui ---- TabView

import SwiftUI

struct TabBar: View {
    @State var currentTab: Int = 0
    var body: some View {
        ZStack(alignment: .top) {
            TabView(selection: self.$currentTab) {
                homeView().tag(0)
                platformsView().tag(1)
                ebayView().tag(2)
            }
            
            .tabViewStyle(.page(indexDisplayMode: .never))
            .edgesIgnoringSafeArea(.all)
            
            TabBarView(currentTab: self.$currentTab)
        }
    }
}

struct TabBarView: View {
    @Binding var currentTab: Int
    @Namespace var namespace
    
    var tabBarOptions: [String] = ["Home", "Calculators", "Saved Items"]
    var body: some View {
            HStack {
                ForEach(Array(zip(self.tabBarOptions.indices,
                                  self.tabBarOptions)),
                        id: \.0,
                        content: {
                    index, name in
                    TabBarItem(currentTab: self.$currentTab,
                               namespace: namespace.self,
                               tabBarItemName: name,
                               tab: index)
                    
                })
            }
            .frame(width: (UIScreen.main.bounds.width / 1.25) - 1)
            .background(Color.white)
            .frame(height: 80)
        
            Spacer()
    }
}

struct TabBarItem: View {
    @Binding var currentTab: Int
    let namespace: Namespace.ID
    
    var tabBarItemName: String
    var tab: Int
    
    var body: some View {
        Button {
            self.currentTab = tab
        } label: {
            VStack {
                Spacer()
                Text(tabBarItemName)
                if currentTab == tab {
                    Color.black
                        .frame(height: 2)
                        .matchedGeometryEffect(id: "underline",
                                               in: namespace,
                                               properties: .frame)
                } else {
                    Color.clear.frame(height: 2)
                }
            }
            .animation(.spring(), value: self.currentTab)
        }
        .buttonStyle(.plain)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        TabBar()
    }
}

Swift Ui ---- Header View

struct headerView: View {
    var body: some View {
        VStack{
            GeometryReader { geo in
                Image("logo") // <-- for testing
                    .resizable()
                    .scaledToFit()
                    .frame(width: geo.size.width * 0.6)
                    .frame(width: geo.size.width, height: geo.size.height)
            }
        }
    }
}

Swift UI ---- HomeView

struct homeView : View{
    var body: some View{
        VStack{
            
        headerView()
            
        VStack{
            
            Text("Calculators")
                .padding(25)
            
            VStack{
                
                Text("")
                    .padding(100)
                }
            }
        .frame(width: (UIScreen.main.bounds.width / 1.25) - 1,
               height: (UIScreen.main.bounds.width / 1.25 ) - 1)
        .background(.gray)
        .cornerRadius(25)
        }
    }
}

Answer 1

Here what I meant :

struct TabBar: View {
    @State var currentTab: Int = 0
    var body: some View {
        VStack { // Instead of ZStack
            headerView() // moved here
            TabBarView(currentTab: self.$currentTab) // moved here
            TabView(selection: self.$currentTab) {
                homeView().tag(0)
                platformsView().tag(1)
                ebayView().tag(2)
            }
            
            .tabViewStyle(.page(indexDisplayMode: .never))
            .edgesIgnoringSafeArea(.all)
            
            // TabBarView(currentTab: self.$currentTab) // moved upper
        }
    }
}

struct homeView : View{
    var body: some View{
        VStack{
            
            // headerView() // Put it in TabBar
            
            VStack{
                
                Text("Calculators")
                    .padding(25)
                
                VStack{
                    
                    Text("")
                        .padding(100)
                }
            }
            .frame(width: (UIScreen.main.bounds.width / 1.25) - 1,
                   height: (UIScreen.main.bounds.width / 1.25 ) - 1)
            .background(.gray)
            .cornerRadius(25)
        }
    }
}

Answer 2

This extension modifies in-scope requests coming to proxy on-the-fly.So we can actually se the extension's request in Logger tab.