How to stop pushed view from temporarily rendering hidden navigationBar?

Question

Unexpectedly, SwiftUI's pushed view temporarily renders its contents with space for the hidden navigationBar upon transition. A moment later it re-renders properly. How do I prevent this behavior?

For GIF screen recording, click the image below.

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var goToNextView = false

    var body: some View {
        NavigationView { ZStack {
            /*@START_MENU_TOKEN@*/Color.yellow/*@END_MENU_TOKEN@*/.edgesIgnoringSafeArea(.all)
            NavigationLink(destination: SecondView(), isActive: $goToNextView) {Text("")}
                .navigationBarTitle("")
                .navigationBarHidden(true)
                .navigationBarBackButtonHidden(true)


            VStack {

                Button(action: {
                    print("Button clicked")
                    self.goToNextView = true
                }) { Text("Go to second view") }
                    .padding()
                Text("This is the first view.")

            }
        }
        .foregroundColor(Color.blue)

        }
    }
}

SecondView.swift

struct SecondView: View {

    var body: some View {

        ZStack {

            Color.purple
            .edgesIgnoringSafeArea(.all)

            .navigationBarBackButtonHidden(true)
            .navigationBarHidden(true)

            VStack { Text("Pushed view") }

        }
        .foregroundColor(Color.white)

    }
}

CodeBender · Accepted Answer · 2020-05-11T19:11:44.387

I removed this behavior by utilizing a View Modifier, influenced by this answer.

Inline comments explain the changes I made.

import SwiftUI

    struct ContentView: View {
        @State var goToNextView = false

        var body: some View {
            NavigationView { ZStack {
                /*@START_MENU_TOKEN@*/Color.yellow/*@END_MENU_TOKEN@*/.edgesIgnoringSafeArea(.all)
                NavigationLink(destination: SecondView(), isActive: $goToNextView) {Text("")}
                    // Removed all nav config code here
                VStack {
                    Button(action: {
                        print("Button clicked")
                        self.goToNextView = true
                    }) { Text("Go to second view") }
                        .padding()
                    Text("This is the first view.")
                }
            }
            // Added this to hide bar
            .hiddenNavigationBarStyle()
            .foregroundColor(Color.blue)

            }
        }
    }

    struct SecondView: View {
        var body: some View {
            ZStack {
                Color.purple
                .edgesIgnoringSafeArea(.all)
                    // Added this to hide bar
                    .hiddenNavigationBarStyle()
                VStack { Text("Pushed view") }
            }
            .foregroundColor(Color.white)
        }
    }

This is the View Modifier taken from the earlier answer:

struct HiddenNavigationBar: ViewModifier {
    func body(content: Content) -> some View {
        content
        .navigationBarTitle("", displayMode: .inline)
        .navigationBarHidden(true)
    }
}

extension View {
    func hiddenNavigationBarStyle() -> some View {
        ModifiedContent(content: self, modifier: HiddenNavigationBar())
    }
}

This is a better answer, as you will have less code when you want to hide the Navigation Bar in multiple views. — davidev, May 11 '20 at 19:07
Thank you. I'm putting the UI on my first app. Thanks for solving this issue and also teaching me a new handy trick for standardizing formatting across views. — Beginner, May 11 '20 at 20:09

score 1 · Answer 2 · answered May 11 '20 at 19:03

SwiftUI requires to set the NavigationBar Title even though you want to hide the navigation bar. In your first View you did that. In the second you didn't.

Adding this to your SecondView fixes the problem:

.navigationBarTitle("")

And SecondView in total:

struct SecondView: View {

    var body: some View {

        ZStack {

            Color.purple
            .edgesIgnoringSafeArea(.all)

            .navigationBarTitle("")
            .navigationBarBackButtonHidden(true)
            .navigationBarHidden(true)

            VStack { Text("Pushed view") }

        }
        .foregroundColor(Color.white)

    }
}

Thank you!! My dumb mistake. – Beginner May 11 '20 at 20:10 — Beginner, May 11 '20 at 20:10

How to stop pushed view from temporarily rendering hidden navigationBar?

2 Answers2