Hide navigation bar but keep back button - SwiftUI

Question

Is it possible to hide/remove a NavigationBar but keep the back button visible?

I have tried hiding the whole navigation bar and adding a custom back button using a NavigationLink but then I get a back button on my first view (ProductList) when pressing back which wasn't there before.

If I have to create a custom back button is there a different way than NavigationLink like I am using in Tab1View to eliminate a back button appearing in ProductList when navigating back?

This is the first view that uses a NavigationLink to a TabBar:

struct ProductList: View {
    ScrollView{
        VStack{
            ForEach(matchedItems) { item in
                NavigationLink(destination: TabView(product: item)){
                        Text("MoveToTabView")
                   }
                }
            }
         }
    }
}

I am then using a TabBar where I am hiding the NavigationBar:

 struct TabView: View {
    var product: ProductModel
    var body: some View {
        TabView {
            // TAB 1
            Tab1View(product: product).tabItem {
                    Text(product.detailTabNames[0])
                }
                .navigationBarTitle("")
                .navigationBarHidden(true)
            // TAB 2
            Tab2View(product: product).tabItem {
                    Text(product.detailTabNames[1])
                }
                .navigationBarTitle("")
                .navigationBarHidden(true)
        }
    }
}

And finally the final View from the Tabbar where I am adding my own custom back button:

struct Tab1View: View {
    var product: ProductModel
    var body: some View {
        ZStack(alignment: .topLeading) {
            Text("Tab1View")
            NavigationLink(destination: ProductList()){
                Image(systemName: "chevron.backward")
            }
        }
    }
}

Back button is integral part of NavigationBar. If you hide bar you need custom back button. — Asperi
– Asperi, Commented Apr 7, 2021 at 3:51
@Asperi - Thank you, I am already adding a custom back button using a NavigationLink, it is in the final bit of code: NavigationLink(destination: ProductList()){ Image(systemName: "chevron.backward") }. By doing this it causes my original view ProductList to have a back button, where there was original no back button if that makes sense? — spoax
– spoax, Commented Apr 8, 2021 at 10:18

binaryPilot84 · Accepted Answer · 2021-04-06 20:26:37Z

2

In order to keep the back navigation capability, you will still need the Navigation bar. The way to do this, with your desired view is:

.navigationBarTitle("", displayMode: .inline)

Outside that, you'll want to leave the navigation bar visible. If you don't, SwiftUI will not display the navigation link to go back.

answered Apr 6, 2021 at 20:26

binaryPilot84

1,0427 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

spoax Over a year ago

Thanks, this does hide the NavigationBar like I wanted, but unfortunately it keeps the NavigationBar padding at the top so everything is shifting down. If I hide the the NavigationBar all together it removes the padding which is what I am after.

binaryPilot84 Over a year ago

In that case, your best bet is to use a ZStack to place a button at the top to act like a back button.

spoax Over a year ago

Thank you, I am already have a ZStack and a NavigationLink, it is in the final bit of code: NavigationLink(destination: ProductList()){ Image(systemName: "chevron.backward") }. By doing this it causes my original view ProductList to have a back button, where there was original no back button if that makes sense?

spoax · Accepted Answer · 2021-04-12 10:08:32Z

I seemed to have resolved my problem by following this and using @Environment

So instead of using a NavigationLink in my final tab like this:

ZStack(alignment: .topLeading) {
            Text("Tab1View")
            NavigationLink(destination: ProductList()){
                Image(systemName: "chevron.backward")
            }
}

I am now using a button that dismisses the view like this using @Environment:

struct Tab1View: View {

@Environment(\.presentationMode) var presentation

    var product: ProductModel
    var body: some View {
        ZStack(alignment: .topLeading) {
            Text("Tab1View")
            Button(action: {
                self.presentation.wrappedValue.dismiss()
            }, label: {
                Text("PressMe")
            })
        }
    }
}

Doing this allows me to hide the NavigationBar in the TabView the same way:

.navigationBarTitle("")
.navigationBarHidden(true)

Collectives™ on Stack Overflow

Hide navigation bar but keep back button - SwiftUI

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related