ios – Why does the Navigation Bar stop working when used with a Tab Bar of style .page?


I’m working with SwiftUI’s Navigation Stack and Tab Bar/Tab Bar Style and before setting the tab bar style to page everything works as expected. Here is an example:

Code:

struct TabsView: View {
    enum Tab {
        case home
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationStack {
                ScrollView {
                    Text("Home Screen")
                        .navigationTitle("Home")
                        .navigationBarTitleDisplayMode(.inline)
                        .toolbar(.visible, for: .navigationBar)
                        .toolbarBackground(.visible, for: .navigationBar)
                }
            }
            .tabItem {
                Image(systemName: "square")
            }
            .tag(Tab.home)
        }
    }
}

Screenshot:
enter image description here

But as soon as I add the .tabViewStyle(.page), it breaks. It does not take up the full height as expected for the navigation bar. Also, the text is now hidden behind the navigation bar:

Code:

struct TabsView: View {
    enum Tab {
        case home
    }
    
    @State private var selectedTab: Tab = .home
    
    var body: some View {
        TabView(selection: $selectedTab) {
            NavigationStack {
                ScrollView {
                    Text("Home Screen")
                        .navigationTitle("Home")
                        .navigationBarTitleDisplayMode(.inline)
                        .toolbar(.visible, for: .navigationBar)
                        .toolbarBackground(.visible, for: .navigationBar)
                }
            }
            .tabItem {
                Image(systemName: "square")
            }
            .tag(Tab.home)
        }
        .tabViewStyle(.page)
    }
}

Screenshot:
enter image description here

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img