SwiftUI Navigation Bar appears behind Status Bar

Question

southbayjt OP

Created Jan ’23

Replies 2

Boosts 0

Participants 2

We have a NavigationView embedded within a TabView, like this:

TabView(selection: $tabSelection) {
   NavigationView {

When a view gets pushed onto the stack in the NavigationView, the NavigationBar appears too high, almost under the StatusBar, as shown in the attached picture. If you touch the StatusBar, somehow it alerts the NavigationBar to scoot downward into its correct position. I discovered a hack where I quickly toggle the StatusBar off, then back on, which accomplishes the same thing. My question, though, is why is this necessary? Why isn't the NavigationBar in the correct place to begin with?

Here's the hack that fixes it:

.onAppear {
   withAnimation(.linear(duration: 0.3)) {
      appViewModel.hideStatusBar.toggle()
   }

   DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
      withAnimation(.easeInOut(duration: 0.3)) {
         appViewModel.hideStatusBar.toggle()
      }
   }
}

Boost

Answer 1

southbayjt OP

Jan ’23

Accepted Answer

Disregard, I think we found a fix.

1

Answer 2

southbayjt OP

Dec ’23

I don't remember the exact fix, but based on my comments listed here, this seemed to be the fix:

    var body: some View {
        // You must have the TabView and the NavigationView at the top of the hierarchy, or you'll have an
        // issue of the navigation bar's breadcrumb and buttons such as "+" appearing behind the status bar (
        // ie, then clock and date). I had a workaround hack where I would toggle the status bar on and off to
        // cause the navigation bar to "walkdown" to its correct location, keeping the hierarchy this way
        // eliminates it altogether.
        TabView(selection: $tabSelection) {
            NavigationView {
                GeometryReader { geomRdr in
                    ZStack {
                        VStack(spacing: 0) {

0