hide Navigation Bar only on first page - Swift UI

swiftui remove navigation bar title
hide navigation bar on scroll swiftui
hide navigation bar swift
swiftui navigation
swiftui navigation bar no title
swiftui hide navigation bar space
uinavigationcontroller hide navigation bar
swiftui hide back button

My app running on Swift UI, and my main page is Home(), In the home page there is NavigationView and NavigationLink(destination: SaveThePlanet()), I have hide the Navigation View on the main page "Home", its also hide in SaveThePlanet(). How can I unhide the navigation back button in the SaveThePlanet() page?

import SwiftUI

struct Home: View {

    @State var show = false
    @State var showSaveThePlanet = false
    var body: some View {
        NavigationView {
            ZStack {
                Color.gray
                ContentView()
                    .blur(radius: show ? 10 : 0)
                    .scaleEffect(show ? 0.90 : 1)
                    .blur(radius: showSaveThePlanet ? 10 : 0)
                    .scaleEffect(showSaveThePlanet ? 0.90 : 1)
                    .animation(.default)

                leftIcon(show: $show)
                    .offset(x: 0, y: showSaveThePlanet ? 300 : 70)
                    .scaleEffect(show ? 0.90 : 1)
                    .blur(radius: show ? 10 : 0)
                    .animation(.easeInOut)

                SaveThePlanet()
                    .background(Color("Bg"))
                    .cornerRadius(10)
                    .shadow(color: Color("Green-Sh"), radius: 10, x: 0, y: 0)
                    .animation(.spring())
                    .offset(y: showSaveThePlanet ? 120 : UIScreen.main.bounds.height)
                    .padding()

                rightIcon(show: $showSaveThePlanet)
                    .offset(x: 0, y: 70)
                    .animation(.easeInOut)
                    .scaleEffect(show ? 0.90 : 1)
                    .blur(radius: show ? 10 : 0)
                    .opacity(showSaveThePlanet ? 0 : 1)


                rightIconClose(show: $showSaveThePlanet)
                    .offset(x: 0, y: 70)
                    .animation(.easeInOut)
                    .scaleEffect(show ? 0.90 : 1)
                    .blur(radius: show ? 10 : 0)
                    .opacity(showSaveThePlanet ? 1 : 0)

                MenuView(show: $show)
            }
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle("Home")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(false)

        }
    }
}

What worked for me : have an @State property on your first view, that determines whether or not you can show the navigation bar. Then pass that property on to all subsequent views via @Binding, so that it is the 'single source of truth' for whether or not the navigation bar should show.

@State private var navBarHidden = false

Then on your main view, reference that property for the navBarHidden property, and set the title. Also add an onAppear closure, which will set that hidden property for when this view re-appears, ie if we pop back here from a detail view.

var body: some View {
    NavigationView {
        NavigationLink(
            destination: DetailView(navBarHidden: self.$navBarHidden)
        ) {
            Text("Go to detail view")
        }
    }
    .navigationBarTitle("")
    .navigationBarHidden(self.navBarHidden)
    .onAppear(perform: {
        self.navBarHidden = true
    })
}

Then on a subsequent detail view, pass that navBarHidden property on as an @Binding (its passed in above)

@Binding var navBarHidden : Bool

var body: some View {
    Text("Hello Detail View!")
        .navigationBarTitle("Detail")
        .onAppear() {
            self.navBarHidden = false
        }

}

And when the onAppear() is called above in the detail view, it sets that original property to false for hidden, which shows the nav bar. And when you click back to return to the home view, the onAppear() of the home view is called again, which sets it back to hidden = true.

How to hide Navigation bar only on first page ? : SwiftUI, r/SwiftUI: SwiftUI is a framework made by Apple to build user interfaces across all Apple platforms with the power of Swift. Allowing you to build … Your navigation bar is still covering UI elements behind the scene — even if you hide it TL;DR: If you can’t tap on buttons in the navigation-bar area, you can jump directly to “4. The

It's a little hard to tell based on the code you've posted, but it looks like you are trying to present a view that slides up from the bottom when showSaveThePlanet is true, and also show the navigation bar only when that view appears.

This can be accomplished by setting .navigationBarHidden(!showSaveThePlanet) anywhere in your body property. Note that your code does not use NavigationLink anywhere to push a new view onto the NavigationView stack, so you would not get a back button. You can add your own button to dismiss the sheet using .navigationBarItems(leading:)

Here is a simplified example showing what I mean.

struct ContentView: View {
    @State private var detailShowing = false

    var body: some View {
        NavigationView {
            ZStack(alignment: Alignment(horizontal: .center, vertical: .top)) {
                Color.gray.edgesIgnoringSafeArea(.all)

                // A card-like view that is initially offscreen,
                // and slides on when detailShowing == true
                DetailView()
                    .offset(x: 0, y: detailShowing ? 120 : UIScreen.main.bounds.height)
                    .animation(.spring())

                // Just here to change state
                Button("Toggle") {
                        self.detailShowing.toggle()
                }
                .padding()
                .offset(x: 0, y: detailShowing ? 0 : 44)
                .animation(.none)
            }
            // This is the key modifier
            .navigationBarHidden(!detailShowing)
            .navigationBarTitle("Detail View", displayMode: .inline)
            .navigationBarItems(leading: Button("Close") {
                self.detailShowing = false
            })
        }
    }
}

struct DetailView: View {
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center, vertical: .top)) {
            RoundedRectangle(cornerRadius: 15).fill(Color.secondary).frame(width: 300, height: 500)
            Text("Detail Content")
                .padding()
        }
    }
}

How to hide SwiftUI NavigationBar, When playing with SwiftUI NavigationView I have came across multiple issues. One of them was how to hide navigation bar on specific view. To hide the navigation bar, use view .navigationBarTitle("") .navigationBarHidden(true) This has to be applied on every NavigationLink destination as well.

Best way that I found is toggling the navBarHidden in destination views. This way incomplete swipe to pop gestures will not remove the navigation bar.

So in your main view you would write

@State private var navBarHidden = true

var body: some View {
NavigationView {
    NavigationLink(
        destination: DetailView(navBarHidden: self.$navBarHidden)
    ) {
        Text("Go to detail view")
    }
}
.navigationBarTitle("")
.navigationBarHidden(self.navBarHidden)
}

And in your destination view:

@Binding var navBarHidden : Bool
var body: some View {
Text("Hello Detail View!")
    .navigationBarTitle("Detail")
    .onAppear {
        self.navBarHidden = false
    }
    .onDisappear {
        self.navBarHidden = true
    }
}

Show / Hide navigation bar in Swif…, In my example code, the navigation bar should be hidden in the second view, but it isn't. After tapping on the push button on the first view (0), it suddenly disappears, and know how to manage showing/hiding navigation bar properly in SwiftUI? content, comments and opinions and is for informational purposes only. The navigation bar doesn’t appear when you preview or even live-preview DetailView, because it doesn’t know it’s in a navigation stack. Go back to ContentView.swift and start Live Preview, then tap a row to see the complete detail view: Handling Split View. So far, I’ve been showing you previews of the iPhone 8 scheme.

navigationBarHidden(_:), Framework. SwiftUI. On This Page. Declaration · Parameters · Discussion · See Also A Boolean value that indicates whether to hide the navigation bar. bar. This modifier only takes effect when this view is inside of and visible within a NavigationView . Sets the title and display mode in the navigation bar for this view. Customizing the navigation bar. There are lots of ways we can customize the navigation bar, such as controlling its font, color, or visibility. However, support for this inside SwiftUI is a little lacking right now, and in fact there are only two modifiers you can use without dropping down to UIKit:

UI Tip: Hiding the Navigation Bar (iOS, Xcode 8, Swift 3), UI Tip: Hiding the Navigation Bar (iOS, Xcode 8, Swift 3) Find out the Ugly Truth of SwiftUI Duration: 6:44 Posted: Jul 10, 2017 The view should be presented with the same animation as the detail view did and also show the name of the workout in the navigation bar with a back button. I could implement this with a NavigationLink view on the details page, but the link always appears as a full width row with the arrow on the right side.

Swift Navigation - Hide Nav Bar Background, In this Swift series I'll guide you through DuckUI, SwiftUI for UIKit. Can we hide only the Duration: 4:19 Posted: Jul 12, 2019 Use navigationBarHidden (_:) to hide the navigation bar. This modifier only takes effect when this view is inside of and visible within a NavigationView.

Comments
  • Can you include some code defining what leftIcon(:), rightIcon(:), etc are? In other words, can you post a code sample that compiles when pasted into a new project?
  • import SwiftUI struct ContentView: View { var body: some View { NavigationView{ NavigationLink(destination: SacendPage()){ Text("Main Page") }.navigationBarTitle("Main Page") } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }