TabView embedded in NavigationView pushes content down - ios

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

Answer 1

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