Disable ipad SpiltView navigation

Question

The iPhone view is exactly the way I want, but the iPad view is rendering weird. If you look at both of these images, the iPad version is like a sidebar view. I'm not sure why. Any help is appreciated! I am trying to make the iPad version like the iPhone. I did chose the app option when setting up and I chose iOS as the deployment. When checking the targets it says "iPhone, iPad".

Also how can I edit the tab bar to be a different color and the SF symbols to be a different color? I was thinking maybe because it's in a label it can't be modified?

ipad iphone

import SwiftUI



struct Home: View {
    var body: some View {
        
        TabView {
            NavigationView {
                ZStack{
                    Color.black
                        .edgesIgnoringSafeArea(.top)
                    Text("Logout")
                    .foregroundColor(.white)
                }
                
            }
            .tabItem {
                Label("Logout", systemImage: "arrow.left.circle")
            }
            
            NavigationView {
                ZStack{
                    Color.black
                        .edgesIgnoringSafeArea(.top)
                    Text("Home")
                    .foregroundColor(.white)
                }

            }
            .tabItem {
                Label("Home", systemImage: "house.circle.fill")
               
            }
            NavigationView {
                ZStack{
                    Color.black
                        .edgesIgnoringSafeArea(.top)
                    Text("Ship")
                    .foregroundColor(.white)
                }
            }
            .tabItem {
                Label("Ship", systemImage: "shippingbox.circle.fill")
            }
            NavigationView {
                ZStack{
                    Color.black
                        .edgesIgnoringSafeArea(.top)
                    Text("Add")
                    .foregroundColor(.white)
                }
                }
            .tabItem {
                Label("Add", systemImage: "plus.circle.fill")
            }
            NavigationView {
                ZStack{
                    Color.black
                        .edgesIgnoringSafeArea(.top)
                    Text("Order")
                    .foregroundColor(.white)
                }
                
            }
            .tabItem{
                Label("Order", systemImage: "bag.circle.fill")
            }
            NavigationView {
                ZStack{
                    Color.black
                        .edgesIgnoringSafeArea(.top)
                    Text("Reports")
                    .foregroundColor(.white)
                }
                
            }
            .tabItem  {
                Label("Reports", systemImage: "doc.circle.fill")
            }
            
        }
        
        }
        
        
    }

Answer 1

try to add .navigationViewStyle(StackNavigationViewStyle()) to the tabView it will make the navigation in stack not with sidebar navigation

import SwiftUI



struct Home: View {
var body: some View {
    
    TabView {
        NavigationView {
            ZStack{
                Color.black
                    .edgesIgnoringSafeArea(.top)
                Text("Logout")
                .foregroundColor(.white)
            }
            
        }
        .tabItem {
            Label("Logout", systemImage: "arrow.left.circle")
        }
        
        NavigationView {
            ZStack{
                Color.black
                    .edgesIgnoringSafeArea(.top)
                Text("Home")
                .foregroundColor(.white)
            }

        }
        .tabItem {
            Label("Home", systemImage: "house.circle.fill")
           
        }
        NavigationView {
            ZStack{
                Color.black
                    .edgesIgnoringSafeArea(.top)
                Text("Ship")
                .foregroundColor(.white)
            }
        }
        .tabItem {
            Label("Ship", systemImage: "shippingbox.circle.fill")
        }
        NavigationView {
            ZStack{
                Color.black
                    .edgesIgnoringSafeArea(.top)
                Text("Add")
                .foregroundColor(.white)
            }
            }
        .tabItem {
            Label("Add", systemImage: "plus.circle.fill")
        }
        NavigationView {
            ZStack{
                Color.black
                    .edgesIgnoringSafeArea(.top)
                Text("Order")
                .foregroundColor(.white)
            }
            
        }
        .tabItem{
            Label("Order", systemImage: "bag.circle.fill")
        }
        NavigationView {
            ZStack{
                Color.black
                    .edgesIgnoringSafeArea(.top)
                Text("Reports")
                .foregroundColor(.white)
            }
            
        }
        .tabItem  {
            Label("Reports", systemImage: "doc.circle.fill")
        }
        
    }.navigationViewStyle(StackNavigationViewStyle())
    
    }
    
    
  }