8

Hello everyone. I'm developing a simple SwiftUI application that displays some tweets. It has a tab view with two views: the main page that will display the tweets and a secondary view.

The problem is that the main page has a NavigationView. If I choose to display only the main page, everything seems correct, but when I display it from the TabView and I scroll down, the NavigationView feels a bit weird.

As I'm not good at explaining, here you have some images:

It should be like this it should be like this

But it is like this but it is like this

I thought of adding .edgesIgnoringSafeArea(.top), but the NavigationView is now hidden by the notch and it doesn't make the effect.

Is there any way I can make the NavigationView display like in the first image?

Any help is appreciated. Thanks in advance.

My code

HomePageView:

struct HomePageView: View {

    var body: some View {
        NavigationView {
            List {
                //tweet code
            }
            .navigationBarTitle("Your feed")
        }
    }
}

TabView:

struct TabController: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            HomePageView()
                .tabItem {
                    VStack {
                        Image(systemName: "house.fill")
                            .font(.title)
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image(systemName: "bell.fill")
                            .font(.title)
                    }
                }
                .tag(1)
        }
    }
}
amodrono
  • 1,900
  • 4
  • 24
  • 45
  • Interestingly, this problem does not exist anymore. I can use your example code, and I do not get any overlap. But as soon as I add `edgesIgnoringSafeArea(.top)` the result becomes horrible: the status bar and the navigation title collapse. Was this a problem only appearing in the Xcode 11 beta releases? – pd95 Feb 29 '20 at 13:47
  • @pd95 Now that you mention it, yes, the problem does not persist on the latest Xcode releases. Maybe it was a problem with SwiftUI beta? – amodrono Feb 29 '20 at 18:46

1 Answers1

14

Try adding .edgesIgnoringSafeArea(.top) to your tabview.

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            HomePageView()
                .tabItem {
                    VStack {
                        Image(systemName: "house.fill")
                            .font(.title)
                    }
                }
                .tag(0)
            Text("Second View")
                .font(.title)
                .tabItem {
                    VStack {
                        Image(systemName: "bell.fill")
                            .font(.title)
                    }
                }
                .tag(1)
        }.edgesIgnoringSafeArea(.top)
    }
}
Amir.n3t
  • 2,859
  • 3
  • 21
  • 28
  • This is fixed in iOS 13.4 ; However, not removing the edgesIgnoringSafeArea causes the NavigationView to be clipped – Snowy_1803 Mar 19 '20 at 01:03