i am struggling to get my tab view to work,

i am struggling to get my tab view to work, when i call views in the action part of my tab view, my background creates issue? does anyone know how to fix this?

struct ContentView: View { @Environment(.colorScheme) var colorMode

let Color1: Color = .cyan

var Color2: Color {
    colorMode == .dark ? .black : .white
}

var TextColor: Color{
    colorMode == .dark ? .black : .black
}

let tax: Double = 0.0875


var OptionTypes: [String] = ["Breakfeast", "Lunch", "Dinner", "Dessert", "Drinks"]

var BreakfeastFoods: [Food] = [
    Food(Name: "Eggs Benedict", Price: 9.50),
    Food(Name: "Avocado Toast", Price: 5.75),
    Food(Name: "French Toast", Price: 12.50),
    Food(Name: "Waffles", Price: 7.25),
    Food(Name: "Pancakes", Price: 8.60)
]
var LunchFoods: [Food] = [
    Food(Name: "Tuna Salad", Price: 11.25),
    Food(Name: "Pizza", Price: 22.50),
    Food(Name: "Chicken Sandwitch", Price: 8.95),
    Food(Name: "French Fries", Price: 5.15),
    Food(Name: "Macaroni and Cheese", Price: 7.50)
]
var DinnerFoods: [Food] = [
    Food(Name: "Ribeye Steak", Price: 18.99),
    Food(Name: "Pork Ribs", Price: 21.75),
    Food(Name: "Salmon", Price: 15.00),
    Food(Name: "Burrito Bowl", Price: 13.99),
    Food(Name: "Chicken Fajitas", Price: 20.50)
]
var DessertFoods: [Food] = [
    Food(Name: "Ice Cream Sundae", Price: 10.00),
    Food(Name: "Fudge Brownie", Price: 4.85),
    Food(Name: "Chocolate Cake Slice", Price: 6.10),
    Food(Name: "Pumpkin Pie", Price: 6.10),
    Food(Name: "Ice Cream Float", Price: 3.50)
]
var Drinks: [Food] = [
    Food(Name: "Water", Price: 0.00),
    Food(Name: "Sparkling Water", Price: 2.15),
    Food(Name: "Soda", Price: 3.00),
    Food(Name: "Coffee", Price: 2.50),
    Food(Name: "Hot Chocolate", Price: 3.50)
]
@State var MyCart: [Food] = []

var body: some View {
    
    NavigationStack{
        
        ZStack{
            LinearGradient(colors: [Color1, Color2], startPoint: .top, endPoint: .bottom).ignoresSafeArea()
                
            VStack(spacing: 40){
                
                ForEach(OptionTypes, id: \.self){
                    OptionType in
                    NavigationLink(value: OptionType){
                        Text(OptionType)
                    }.frame(width: 250, height: 70).background(LinearGradient(colors: [.cyan, .white,.cyan], startPoint: .topLeading, endPoint: .bottom)).foregroundStyle(TextColor).cornerRadius(100).font(.system(size: 25, weight: .medium)).padding(.top, 16)
                    
                }
 
                
            }.navigationDestination(for: String.self) {
                OptionType in
                switch OptionType{
                    
                case "Breakfeast":
                    BreakFeastView(BreakfeastList: BreakfeastFoods, Color1: Color1, Color2: Color2)
                case "Lunch":
                    LunchView(LunchList: LunchFoods, Color1: Color1, Color2: Color2)
                case "Dinner":
                    DinnerView(DinnerList: DinnerFoods, Color1: Color1, Color2: Color2)
                case "Dessert":
                    DessertView(DessertList: DessertFoods, Color1: Color1, Color2: Color2)
                case "Drinks":
                    DrinksView(DrinksList: Drinks, Color1: Color1, Color2: Color2)
                    //                            case "My Cart":
                    //                                MyCartView(MyCartList: MyCart, Color1: Color1, Color2: Color2)
                default:
                    Text("Error")
                }
            }
 
            
            
        } .navigationTitle("Choose Menu")
        
        TabView{
            Tab("Menu", systemImage: "fork.knife"){
                
                
            }
            Tab("My-Cart", systemImage: "cart.fill"){
                
                
            }
            Tab("Store Location", systemImage: "mappin"){
                
            }
        }
    }
    }
}

Hello @kevdoescode,

I'm not sure there is enough code here to diagnose the issue. Are you able to provide a focused sample project that reproduces?

--Greg

how do i show an entirely different screen when the connection tab is tapped on my tab bar/tab view?

// // ContentView.swift // tabBarPractice // // Created by Kev on 7/28/25. //

import SwiftUI

struct ContentView: View { var body: some View {

    ZStack{
        Color.cyan
        VStack{
            TabView{
                Tab("home", systemImage: "house"){
                    
                }
                Tab("connection", systemImage: "wifi"){
                    
                }
            }
        }
        
        
    }
    
    
    
}

} #Preview { ContentView() } struct connectionView: View{

var body: some View{
    
    ZStack{
        Color.black
        VStack{
            Text("Wifi is up")
        }
    }
    
}

}

i am struggling to get my tab view to work,
 
 
Q