hide Navigation Bar only on first page - Swift UI

Question

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)

        }
    }
}

Answer 1

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.