Navigationview Doesn't Display Correctly When Using Tabview in Swiftui

NavigationView doesn't display correctly when using TabView in SwiftUI

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

NavigationViews in TabView displayed incorrectly

One solution is to use the Tab selection parameter. It is better not to use the StackNavigationViewStyle() with these embedded NavigationViews. What you may use is a selecter, which keeps track of the page you are on and a State variable storing the current page. This way, the NavigationView is in one place and different titels are given to each TabView item.

struct ContentView: View {
    
    @State private var selectedTab = "1"
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                Page1()
                    .tag("1")
                    .navigationBarTitle("Page 1")

                Page2()
                    .tag("2")
                    .navigationBarTitle("Page 2")
            }
            .tabViewStyle(.page)
        }
    }
}

struct Page1: View {
var body: some View {
    ScrollView {
        Rectangle()
            .fill(.red)
            .frame(width: 100, height: 100)
    }
}}

struct Page2: View {
var body: some View {
    ScrollView {
        Rectangle()
            .fill(.blue)
            .frame(width: 100, height: 100)
    }
}}

Updated
When you want the NavigationTitle to be .inline when scrolled, use the following code.

struct ContentView: View {
    
    @State private var selectedTab = "1"
    
    var body: some View {
        NavigationView {
            GeometryReader { proxy in
                ScrollView(showsIndicators: false) {
                    TabView(selection: $selectedTab) {
                        Page1()
                            .tag("1")
                            .navigationBarTitle("Page 1")

                        Page2()
                            .tag("2")
                            .navigationBarTitle("Page 2")
                    }
                    .tabViewStyle(.page)
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                    .frame(height: proxy.size.height)
                    .ignoresSafeArea()
                    
                }
            }
        }
    }
}

struct Page1: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 200)
        }
    }
}

struct Page2: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(.blue)
                .frame(width: 200, height: 200)
        }
    }
}

SwiftUi Tabview not loading that views properly at start

You should remove the .tabViewStyle modifier in your ContentView.

TabView has two very different roles in SwiftUI. One is to manage a tab bar which allows you to tap on icons in a tab bar to choose which view to display; another is to provide a swipeable, paged collection of views.

Given your use of NavigationView within your sub views, I’d say the first style is the one you want. That’s the default, so remove the style modifier (which switches the tab view to the second form) and all should be well. You should also be able to remove the .ignoresSafeArea modifier.

NavigationView inside a TabView Swift UI

.tabItem should be used as a modifier on the view that represents that tab.

In the first example, this doesn't work because of a syntax error -- you're trying to use it on the opening of a closure in NavigationView {, when instead you want it on the outside of the closing brace: NavigationView { }.tabItem(...)

In the second example, you're using .tabItem as a modifier on the entire TabView instead of the NavigationView.

Both of your examples may have revealed what was going on more obviously if you indent your code so that you can see the hierarchy. Trying selecting your code in Xcode and using Ctrl-I to get Xcode to properly format it for you.

Here's a working version:

struct ContentView : View {
    var body: some View {
        TabView {
            NavigationView {
                Text("Tab bar test")
                    .navigationBarTitle("Page One")
            }
            .tabItem { //note how this is modifying `NavigationView`
                Image(systemName: "1.circle")
                Text("Home")
            }
            
        }
    }
}

---

Related Topics