Swiftui invisible bar on the top of the screen

user_14984656 0
Viewed 434

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

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)
}
navigationbar swiftui swift
2 Answers

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()
            
    }
    
}
user_153485430

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)
    }
}
user_91978020
Related