Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding a TabView makes the Navigation Bar not cover the safe area in SwiftUI

When adding a TabView in my SwiftUI iOS App, the Navigation Bar stops covering up the notch

I've tried creating another file for the TabView implementation ( Modifying SceneDeletage and so on)

Here is a simple code without TabView that makes the Navigation Bar cover the safe area (aka the notch)

import SwiftUI

struct ContentView: View {
    var body: some View {

        NavigationView{
            ScrollView{
                HStack{
                    VStack{
                        ForEach((1...10), id: \.self){_ in
                            Text("Hello")
                            .padding(.leading, 20)
                        }
                    }
                    Spacer()
                    //.padding(.leading, 20)
                }
            }
        .navigationBarTitle("Title Covers Safe Area")
        }

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

Here is a code with TabView that makes the Navigation Bar NOT cover up the safe area

import SwiftUI

struct ContentView: View {
    var body: some View {

        TabView {
            NavigationView{
                ScrollView{
                    HStack{
                        VStack{
                            ForEach((1...10), id: \.self){_ in
                                Text("Hello")
                            }
                        }
                        Spacer()
                    }
                    .padding(.leading, 20)
                }
                .navigationBarTitle("Doesn't Cover Safe Area")
            }
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }.tag(0)
            HStack{
                Spacer()
                VStack{

                    Spacer()
                    Text("Second View")
                        .font(.system(size: 40))
                }

            }

                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second")
                }.tag(1)
        }

    }
}


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

like image 321
Erdal Avatar asked Sep 30 '19 18:09

Erdal


People also ask

How do I cover a safe area in SwiftUI?

By default, SwiftUI place views only inside the safe area. Here is the example showing that. But we can change this behavior using the ignoresSafeArea view modifier. The ignoresSafeArea view modifier expands the view and fills the space by ignoring the safe area.

How do I manage navigation in SwiftUI?

Before NavigationStack and NavigationSplitView , SwiftUI introduced the NavigationView and NavigationLink structs. These two pieces work together to allow navigation between views in your application. The NavigationView is used to wrap the content of your views, setting them up for subsequent navigation.

How do I hide the navigation bar back button in SwiftUI?

The . navigationBarBackButtonHidden(true) will hide the back button.


1 Answers

You can use method edgesIgnoringSafeArea(_:)

TabView {
  ...
}
.edgesIgnoringSafeArea(.top)
like image 72
sycx Avatar answered Oct 03 '22 13:10

sycx