Search code examples
swiftswiftuitabviewios-navigationview

NavigationView doesn't display correctly when using TabView in SwiftUI


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

Solution

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