NavigationLink pops automatically to destination showing an emptyView and Back button to return to main NavigationView onAppear

52 Views Asked by At

I have a NavigationView on a view, once I load the view, I don't see my NavigationView until I hit the back button. It's a known issue issue with NavigationView, which is deprecated now, but I didn't know how to use the same script with NavigationStack (the new way).

import SwiftUI

struct MatchListView: View {

@StateObject private var matchListViewModel = MatchListViewModel()

@State var selection: Int? = 99

@State var matchItem: MatchModel

    var body: some View {
        VStack{
            if(matchListViewModel.isLoading){
                ProgressView()
            } else {
                if(matchListViewModel.matchModels.isEmpty){
                    Text("no-matches-yet")
                } else {
                    NavigationView{
                        List(matchListViewModel.matchModels){ item in
                            HStack{
                                ZStack(alignment: .leading) {
                                 
                                    NavigationLink(tag: selection ?? 0, selection: $selection) {
                                      chooseDestination(i: selection ?? 0, match: matchItem)
                                    } label: {
                                        MatchItemView(model: item)
                                        Button(action: {
                                            print("The name is ", (item.name))
                                            print("login tapped")
                                            matchItem = item
                                            self.selection = 0
                                        }) {
                                            Text("Message")
                                        }.padding(.horizontal, 15)
                                            .frame(width: 120, height: 30, alignment: .bottom)
                                    }
                                    .navigationViewStyle(StackNavigationViewStyle())
                                 
                                    .onTapGesture {
                                        self.selection = 1
                                        matchItem = item
                                    }
                                    .buttonStyle(HireButtonStyle())
                                }
                            .buttonStyle(PlainButtonStyle())
                            }
                        }
                    }
       
                }
            }
        }
        .navigationTitle("messages")
        .onAppear(perform: performOnAppear)
    }
    @ViewBuilder
    func chooseDestination(i: Int, match: MatchModel) -> some View {
           switch i {
           case 1: UserProfileScreen(myViewModel: UserProfileScreenViewModel(selectedUserId:     match.userId), showButtons: false )
           case 0: ChatView(match: match)
           default: EmptyView()
           }
       }
    
    private func performOnAppear(){
        if matchListViewModel.isFirstFetching{
            matchListViewModel.fetchMatches()
        }
    }
}

I tried using NavigationStack instead of NavigationView, but the NavigationLink became un-clickable, nothing happens when I click on different items.

Edit: Here is my NavigationStack, trying to move away from NavigationView, but now, when I click on the button Message, NavigationDestination doesn't trigger, It stays in the main NavigationStack, and when I click on the NavigationLink it goes to the destination desired, but the performance is quiet slow compared to using NavigationView:


import SwiftUI

struct MatchListView: View {
    @StateObject private var matchListViewModel = MatchListViewModel()
    @State var selection: Int? = 99
    
    @State var matchItem: MatchModel
    var body: some View {
        VStack{
            if(matchListViewModel.isLoading){
                ProgressView()
            }else {
                if(matchListViewModel.matchModels.isEmpty){
                    Text("no-matches-yet")
                } else {
                    NavigationStack{
                        List(matchListViewModel.matchModels){ item in
                            HStack{
                                ZStack(alignment: .leading) {
                                    NavigationLink(value: item) {
                                        MatchItemView(model: item)
                                        Button(action: {
                                            print("The name is ", (item.name))
                                            print("login tapped")
                                            matchItem = item
                                            self.selection = 0
                                        }) {Text("Message")}
                                            .padding(.horizontal, 15)
                                            .frame(width: 120, height: 30, alignment: .bottom)
                                    }
                                    .onTapGesture {
                                        self.selection = 1
                                        matchItem = item
                                        
                                    }
                                    .tag(selection)
                                    .buttonStyle(HireButtonStyle())
                          
                                }
                            .buttonStyle(PlainButtonStyle())
                            }
                        }
         .navigationDestination(for: MatchModel.self) { park in
          chooseDestination(i: selection ?? 0, match: matchItem)
                           }
                    }
                }
            }
        }
        .navigationTitle("messages")
        .onAppear(perform: performOnAppear)
    }
    @ViewBuilder
    func chooseDestination(i: Int, match: MatchModel) -> some View 
 {
      switch i {
      case 1: UserProfileScreen(myViewModel: UserProfileScreenViewModel(selectedUserId: match.userId), showButtons: false )
      case 0: ChatView(match: match)
      default: EmptyView()
           }
       }
    
    private func performOnAppear(){
        if matchListViewModel.isFirstFetching{
            matchListViewModel.fetchMatches()
        }
    }
}
0

There are 0 best solutions below