9

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()
    }
}
Erdal
  • 193
  • 1
  • 6

1 Answers1

13

You can use method edgesIgnoringSafeArea(_:)

TabView {
  ...
}
.edgesIgnoringSafeArea(.top)
sycx
  • 891
  • 6
  • 8
  • I'll check this as the answer, but this method involves other issues with landscape orientation as of Xcode 11A420a – Erdal Oct 01 '19 at 17:06
  • 2
    This does not work for me, nothing happens when I put `.top` I tried with `.all` that seems to work but that messes the bottom tab view as well, I dont know if this is a bug in swiftUI or I am doing something wrong – Divyanshu Negi Dec 15 '19 at 10:21
  • 1
    @DivyanshuNegi it wouldn't work if you have modified the appearance of NavigationBar globally (ex. `UINavigationBar.appearance().backgroundColor = .blue`) – Ishmeet Dec 26 '19 at 18:13
  • 1
    It does not work even after removing global appearance changes. – iSpain17 Jan 16 '20 at 22:39