SwiftUI hiding a navigation bar only when looking at ContentView

Question

I have a Content file and am hiding the navigation bar because it takes up space and pushes elements down. One of the buttons in the ContentView redirects (using a navigation link) to another view. In this other view, the navigationBar is still hidden....for simplicity sake, I'll cut out some of the code from ContentView:

//this is the view that looks "fine" (i.e. the navigation bar takes up no space)
struct ContentView: View {
    @State private var isPresentedSettings = false
    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    SettingsButton(isPresentedSettings: $isPresentedSettings)
                }
            }.navigationBarTitle("").navigationBarHidden(true)
        }
    }
}

//this is the button that pulls up the settings page view
struct SettingsButton: View {
    @Binding var isPresentedSettings: Bool
    var body: some View {
        NavigationLink (destination: SettingsPageView(isPresentedSettings: 
        self.$isPresentedSettings)) {
            Button(action: { self.isPresentedSettings.toggle() }, label: { Text("Button") })
        }
    }
}

//This is the view that should have a navigationbar but it doesn't
struct SettingsPageView: View {
    @Binding var isPresentedSettings: Bool
    var body: some View {
        NavigationView {
            VStack {
                Text("This is a view")
            }.navigationBarTitle("Settings", displayMode: .inline)
        }
    }
}

Also...there may have been typos because I just copied the code over from another computer. Sorry and thank you in advance!

pawello2222 · Accepted Answer · 2020-06-03T23:29:12.223

1

Firstly, you don't need to have this isPresentedSettings variable for presenting a NavigationLink.

NavigationLink(destination: SettingsPageView()) {
    Text("Button")
}

And there should be only one NavigationView in your view hierarchy.

This is how your final code can look like:

struct ContentView: View {
    @State private var navBarHidden = true

    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    SettingsButton(navBarHidden: $navBarHidden)
                }
            }
            .navigationBarHidden(navBarHidden)
        }
    }
}

struct SettingsButton: View {
    @Binding var navBarHidden: Bool

    var body: some View {
        NavigationLink(destination: SettingsPageView(navBarHidden: $navBarHidden)) {
            Text("Show View")
        }
    }
}

struct SettingsPageView: View {
    @Binding var navBarHidden: Bool

    var body: some View {
        VStack {
            Text("This is a view")
        }
        .navigationBarTitle("Settings", displayMode: .inline)
        .onAppear {
            self.navBarHidden = false
        }
        .onDisappear {
            self.navBarHidden = true
        }
    }
}

edited Jun 03 '20 at 23:29

answered Jun 03 '20 at 23:00

pawello2222

46,897
22
145
209

Hi, so this code makes it so that the navigationBar disappears when I have redirected to the SettingsPageView...how can I fix that? – nickcoding Jun 03 '20 at 23:13
I tested this code in Xcode 11.5, Swift 5.1. The `ContentView` screen has no navigation bar and the `SettingsPageView` has. Try using my code only and then add the other methods. – pawello2222 Jun 03 '20 at 23:19
Well...the navigationBar should be hidden on the ContentView (meaning you have to use .navigationBarHidden(true), not false)....so navBar is hidden in ContentView and then it shows the normal navBar that's in SettingsPageView... – nickcoding Jun 03 '20 at 23:22
1

Oh, my mistake. I updated my answer. Should work now :) – pawello2222 Jun 03 '20 at 23:29
EDIT: This actually creates some kind of queue issue I think. When I press the settings button, it sets the navBarHidden to true, and this pulls up the settings page fine. When I press the back button however, a visible distortion can be seen as the navBar changes from taking up space to not taking up space...any way to avoid this? – nickcoding Jun 04 '20 at 00:05
As far as I know this is the best SwiftUI can do. I had the similar [problem](https://stackoverflow.com/questions/61970939/swiftui-hide-tabview-bar-inside-navigationlink-views) recently (with the tab bar this time) and it looks like all hacks mess up the transition animation. – pawello2222 Jun 04 '20 at 00:08
Rip, okay. Thanks. Fingers crossed something in SwiftUI 2 helps this problem :( – nickcoding Jun 04 '20 at 00:14

SwiftUI hiding a navigation bar only when looking at ContentView

1 Answers1

Linked