Swiftui invisible bar on the top of the screen

Question

I have the following in problem. If I try to give a view a color (Color.red for example) I get the following output:

I can just add .edgesignoressafearea(.top) and the top also gets red. But when I want to add an clickable item, the user won't be able to click it since there still is this invisible bar on the top of the screen. Does Anyone know what my problem is? The problem is in all the tabable views(Timeline, Favorits, Discover, Account). So It must be in either the first code or in tabview (second code) that I send in this post.

When the user clicks on the app first they get this view sending the user to the signin view or the app itself:

var body: some View {
    NavigationView {
        VStack {
            NavigationLink(destination: tabView().navigationBarHidden(true), isActive: $tabview, label: { EmptyView() })
            NavigationLink(destination: loginView().navigationBarHidden(true), isActive: $login, label: { EmptyView() })
                
            if tabview == false && login == false {
                Text("loading")
                    .onAppear(perform: checklogin)
            }
        }
        .navigationBarBackButtonHidden(true)
        .navigationBarHidden(true)
    }
}

Then the apps sends them to tabview:

 var body: some View {
    TabView(selection: $selection) {
        Timeline()
            .tabItem {
                Label("timeline", systemImage: "house")
            }
            .tag(0)
        
        Favorits()
            .tabItem {
                Label("favorits", systemImage: "heart")
            }
            .tag(1)
        
        Discover()
            .tabItem {
                Label("discover", systemImage: "network")
            }
            .tag(2)
        
        Account()
            .tabItem {
                Label("account", systemImage: "person")
            }
            .tag(3)
    }
    .navigationBarBackButtonHidden(true)
    .navigationBarHidden(true)
 }

The problem happens on all of this views. This is the view where I made the screenshot of:

var body: some View {
    ZStack {
        Color.red
        Text("Hello fav!")
    }
    .navigationBarBackButtonHidden(true)
    .navigationBarHidden(true)
}

Answer 1

add .edgesIgnoringSafeArea(.top) and remove your navigation bar if you don't want to be able to get back to your login view anytime. That's the full code with a login page, now it depends what you want on that login page :

import SwiftUI

struct ContentView: View {
@State var showLoginView: Bool = false

    var body: some View {
        VStack {
            if showLoginView {
                MainView()
            } else {
                Button("Login") {
                    self.showLoginView = true
                }
            }
        }
    }
}

struct MainView: View {
    var body: some View {
        TabView {
            TimeLine()
                .tabItem {
                    Label("timeline", systemImage: "house")
                }
            Favorits()
                .tabItem {
                    Label("favorits", systemImage: "heart")
                }
            Discover()
                 .tabItem {
                     Label("discover", systemImage: "network")
              }
            Account()
                 .tabItem {
                     Label("account", systemImage: "person")
              }
        }
        
    }
    
}
    
struct TimeLine: View {
    var body: some View {
        Color.blue
            .edgesIgnoringSafeArea(.top)
    }
}

struct Favorits: View {
    var body: some View {
        ZStack {
            Color.red
                .edgesIgnoringSafeArea(.top)
            Text("Hello fav!")
        }
    }
}

struct Discover: View {
    var body: some View {
        Color.yellow
            .edgesIgnoringSafeArea(.top)
    }
}
struct Account: View {
    var body: some View {
        Color.purple
            .edgesIgnoringSafeArea(.top)
    }
}


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

Answer 2

You need to set the navigation Title to "" because your View is embedded in NavigationView

Create a ViewModifier like this and apply it to your VStack

struct HiddenNavBarModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}