TabView embedded in NavigationView pushes content down

Question

I embedded a TabView in a NavigationView and the Text in the view gets pushed down slightly. I've tried moving the views around however it just ends up breaking functionally. You can see the green text is not vertically aligned to the rest of the device, but instead aligned to the content under the navigation bar.

var body: some View {
    NavigationView{
        
        TabView {
            Text("TEST 1").foregroundColor(color).font(Font.custom("Catamaran-ExtraBold", size: 48)).navigationTitle("TEST 1")
            
            Text("TEST 2").foregroundColor(color).font(Font.custom("Catamaran-ExtraBold", size: 48)).navigationTitle("TEST 2")
        }
        
        .foregroundColor(.black).navigationBarTitleDisplayMode(.inline)
        .font(Font.custom("Catamaran-ExtraBold", size: 20))
        .navigationBarItems(
            leading:
                NavigationLink(destination: SettingsView(), label: {
                    Image(systemName: "gearshape")
                })).foregroundColor(colorScheme == .dark ? .white : .black)
        
        
    }
    .navigationViewStyle(.stack)
    .ignoresSafeArea()
    .tabViewStyle(.page)
    .indexViewStyle(.page(backgroundDisplayMode: .always))
}

[This post](https://stackoverflow.com/questions/56528361/swiftui-view-is-in-the-middle-instead-of-in-the-top) may help you. — Ptit Xav, Nov 18 '21 at 13:21
@user302975 It's a bit strange what you are trying to achieve. Centering it as if the `NavigationView` wasn't there means that the view is no longer centered in its container. It will look strange and not centered like this — George, Nov 22 '21 at 14:42

score 0 · Answer 1 · answered Nov 23 '21 at 22:35

It's a bit strange what you are trying to achieve. Centering it as if the NavigationView wasn't there means that the view is no longer centered in its container. It will look strange and not centered like this.

However, here is how you can achieve this. This example uses GeometryReaders to measure the height of the navigation bar, and take away half that so the text now appears centered to the safe area.

Before:

struct ContentView: View {
    var body: some View {
        NavigationView {
            TabView {
                Text("TEST 1")
                    .font(.title.bold())
                    .foregroundColor(.green)
                    .navigationTitle("TEST 1")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.red.opacity(0.1))

                Text("TEST 2")
                    .font(.title.bold())
                    .foregroundColor(.green)
                    .navigationTitle("TEST 2")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.red.opacity(0.1))
            }
            .tabViewStyle(.page)
            .indexViewStyle(.page(backgroundDisplayMode: .always))
        }
        .navigationViewStyle(.stack)
    }
}

After:

struct ContentView: View {
    var body: some View {
        GeometryReader { geoRoot in // <- HERE
            NavigationView {
                GeometryReader { geo in // <- HERE
                    let yOffset = (geoRoot.safeAreaInsets.top - geo.safeAreaInsets.top) / 2 // <- HERE

                    TabView {
                        Text("TEST 1")
                            .font(.title.bold())
                            .foregroundColor(.green)
                            .navigationTitle("TEST 1")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.red.opacity(0.1))
                            // <- Also replicate offset here, not done for demo

                        Text("TEST 2")
                            .font(.title.bold())
                            .foregroundColor(.green)
                            .navigationTitle("TEST 2")
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.red.opacity(0.1))
                            .offset(y: yOffset) // <- HERE
                    }
                    .tabViewStyle(.page)
                    .indexViewStyle(.page(backgroundDisplayMode: .always))
                }
            }
            .navigationViewStyle(.stack)
        }
    }
}

Result

Before: TEST 1 tab
After: TEST 2 tab

TabView embedded in NavigationView pushes content down

1 Answers1

Result