I have a project I am working on. I have minimised the project to show the layered views for the purpose of this question.
The project displays ShoeRowView in a ScrollView. The ShowRowView features a Button titled "See All". This button takes the user to ShoeSeeAllView. This is where there is a VStack listing all the different pairs of shoes in the form of a view called ShoeViewLong.
When a ShowViewLong is tapped, it takes the user to ShoeDetailView.
The Navigation works as expected but the issue is there are two back buttons, one under the other.
I have tried using an @State var with @Binding but can't seem to get anything to work.
Here is the code:
struct Marketplace: View {
var body: some View {
NavigationView {
MarketplaceShoesView()
}
}
}
struct MarketplaceShoesView: View {
var body: some View {
ScrollView {
ShoeRowView(shoeData: shoe)
}
}
}
struct ShoeRowView: View {
@State private var isShowingDetailView = false
var shoeData: ShoeRow
var body: some View {
VStack {
HStack {
Text(shoeData.title)
HStack {
NavigationLink("", isActive: $isShowingDetailView){ShoesSeeAllView(shoeData: shoeData, shoe_id: shoeData.id)}
.navigationTitle("")
Button("See All") {
isShowingDetailView = true
}
Image(systemName: "chevron.right")
}
.padding(.trailing)
}
HStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
ForEach(shoeData.shoes ?? []) { shoe in
Text("Name of shoes")
}
}
.padding()
}
}
Divider()
}
}
}
struct ShoeSeeAllView: View {
var shoeData: ShoeStruct
var shoe_id: String
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
VStack {
VStack(spacing: 25) {
ForEach(shoeData.shoes ?? []) { shoe in
ShoeViewLong(shoeData: shoe)
}
}
}
}
}
.navigationTitle(shoeData.title)
}
}
struct ShoeViewLong: View {
var shoeData: ShoeStruct
var body: some View {
NavigationLink(destination: ShoeDetailView(shoe_id: shoeData.id ?? "")) {
HStack(spacing: 12){
Image("ShoeImage")
.resizable()
Text("Shoes Name")
}
}
}
}
struct ShoeDetailView: View {
var body: some View {
Text("This is shoes detail view")
}
}
How can I fix the Navigation? It should go like this:
Tap "See All" (in a ShoesRowView) -> ShoesSeeAllView -> Tap a ShoeViewLong -> Take to ShoeDetailView.
When in ShoeDetailView, the user taps back button -> goes to ShoesSeeAllView > Tap back again -> goes to MarketplaceShoesView (where ShoeRowView is being displayed)
The problem was with nested NavigationView's. After removing NavigationView from ShoeSeeAllView, the problem was solved.