Swift ui custom tabView breaking with navigationView - swift

Question

Having difficulties with my tabView, (which has been custom made to accommodate my gridView which allows picture buttons taking me to a new display). Displaying a blank View with "back" button on launch. Then after selecting tab 2 and coming back to tab 1, displays the screen in full detail. After some testing the navigationlink is the cause but i'm confused on the resolution.
Within my main build the navigationTitle sits mid centre the screen and when scrolled greys out a large sections. I believe this is due to there being multiple navigationlinks/views creating a rectangle block where the navigationlView/Links are sitting on top of each other.
TabView
struct headerView: View {
#State var currentTab: Int = 0
var body: some View {
VStack {
TabBarView(currentTab: self.$currentTab)
.padding(10)
TabView(selection: self.$currentTab) {
grid().tag(0)
tabView2().tag(1)
tabView3().tag(2)
}
.tabViewStyle(.page(indexDisplayMode: .never))
.edgesIgnoringSafeArea(.all)
}
}
}
struct TabBarView: View {
#Binding var currentTab: Int
#Namespace var namespace
var tabBarOptions: [String] = ["Test 1", "Test 2", "Test 3"]
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: 50)
}
}
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)
}
}
TabView2
struct tabView2: View {
var body: some View {
VStack {
Text("Hello")
}
}
}
imageGrid
enum ImageEnum: String, CaseIterable { //Please find a better name ;)
case image1, image2
var imageName: String { // get the assetname of the image
switch self {
case .image1:
return "image1"
case .image2:
return "image2"
}
}
#ViewBuilder
var detailView: some View { // create the view here, if you need to add
switch self { // parameters use a function or associated
case .image1: // values for your enum cases
TestView1()
case .image2:
TestView2()
}
}
}
struct grid: View {
var columnGrid: [GridItem] = [GridItem(.flexible(), spacing: 25), GridItem(.flexible(), spacing: 25)]
var body: some View {
NavigationView{ // Add the NavigationView
LazyVGrid(columns: columnGrid, spacing: 50) {
ForEach(ImageEnum.allCases, id:\.self) { imageEnum in // Iterate over all enum cases
NavigationLink(destination: imageEnum.detailView){ // get detailview here
Image(imageEnum.imageName) // get image assset name here
.resizable()
.scaledToFill()
.clipped()
.cornerRadius(25)
}
}
}
}
}
}
TestView
struct TestView1: View{
var body: some View{
Text("test1")
}
}
struct TestView2: View{
var body: some View{
Text("test2")
}
}