Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)
        }
    }
}
like image 287
iAlex11 Avatar asked Sep 03 '19 22:09

iAlex11


1 Answers

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)
    }
}
like image 191
Amir.n3t Avatar answered Nov 11 '22 18:11

Amir.n3t