Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Hide navigation bar but keep back button – SwiftUI

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")
            }
        }
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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)

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search