NavigationView doesn't display correctly when using TabView in SwiftUI

7
votes

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)
        }
    }
}
1
swiftswiftuitabviewios-navigationview
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
@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? – iAlex11

1 Answers

14
votes

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