in SwiftUI, Can't navigate from one screen to another screen using response from @State type datatype

Question

I want to Navigate from HomeView to PopularArtWorkFilterView. I used NavigationView and NavigationLink for navigating. Navigation is fired but PopularArtWorkFilterView screen not found. Just this is View All Popular art work seen after clicking. Here the code i tried.

HomeView.swift

struct HomeView: View {
    
    private let homeViewModel: HomeViewModel = HomeViewModel()
    
    @State var isPopularArtWorkViewAllTextClicked: Bool = false
    
    var body: some View {
        
        NavigationView {
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    HomeTopView()
                        .padding(.horizontal, 20)
                        .padding(.bottom, 20)
                    
                    // Click event occures.
                    // But not navigate to PopularArtWorkFilterView
                    if isPopularArtWorkViewAllTextClicked {
                        NavigationLink("View All Popular art work", destination: PopularArtWorkFilterView())
                    }
                    
                    PopularArtWorkListView(
                        popularArtWorkList: homeViewModel.getPopularArtWorks(),
                        isViewAllClicked: $isPopularArtWorkViewAllTextClicked
                    ).padding(.bottom, 40)
                    
                    TrendingArtistListView(trendingArtistList: homeViewModel.getTrendingArtists())
                        .padding(.bottom, 40)
                    
                    BidArtEventInfoView(bidArtEvent: homeViewModel.getBidArtEvents()[1])
                }
            }
            .background(Color("background"))
        }
    }
}

PopularArtWorkListView.swift

struct PopularArtWorkListView: View {
    
    let popularArtWorkList: [PopularArtWork]
    
    // Variable for tracking Click Listener
    @Binding var isViewAllClicked: Bool
    
    var body: some View {
        
        VStack(spacing: 20) {
            HeaderView(
                istClicked: $isViewAllClicked
            ).padding(.horizontal, 20)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 20) {
                    ForEach(popularArtWorkList, id: \.id) { popularArtWork in
                        PopularArtWorkItemView(popularArtWork: popularArtWork)
                    }
                }.padding(.horizontal, 20)
            }
        }
    }
}

private struct HeaderView: View {
    
    // Variable for tracking Click Listener
    @Binding var istClicked: Bool
    
    var body: some View {
        
        HStack {
            Text("Popular Artwork")
                .font(.custom(.Urbanist_Bold, size: 20))
            
            Spacer()
            
            Text("View All")
                .font(.custom(.Urbanist_Bold, size: 15))
                .foregroundColor(.gray.opacity(0.7))
                .onTapGesture {
                    // Toggle @Binding variable to track the click listener 
                    istClicked.toggle()
                }
            
        }
    }
}

Before clicking

After clicking

A `NavigationLink` is for all intents and purposes a button all you are doing is displaying and hiding the button that would do the navigating, — lorem ipsum, Nov 26 '22 at 12:55

Evgeny K · Accepted Answer · 2022-11-27T07:34:04.670

1

Instead of

if isPopularArtWorkViewAllTextClicked {
   NavigationLink("View All Popular art work", destination: PopularArtWorkFilterView())
}

you should use

NavigationLink("View All Popular art work", isActive: $isPopularArtWorkViewAllTextClicked) { 
   PopularArtWorkFilterView()
}

Be aware that this approach has been deprecated along with NavigationView in iOS 16. If you are targeting iOS 16+ devices consider using NavigationStack instead of NavigationView, and navigationDestination modifier:

NavigationStack {
    ScrollView(.vertical, showsIndicators: false) {
        // ...
    }
    .background(Color("background"))
    .navigationDestination(isPresented: $isPopularArtWorkViewAllTextClicked) {
        PopularArtWorkFilterView()
    }
}

edited Nov 27 '22 at 07:34

answered Nov 26 '22 at 16:55

Evgeny K

1,744
3
13
19

thanks a lot for your approach. It fixed my issues. But the problem is `init(_:isActive:destination:)` was deprecated in iOS 16.0. That's why, I have find out another solution. – Aminul Haque Aome Nov 27 '22 at 02:28
Yes, if you are targeting iOS 16 + only, then it's better to use `NavigationStack` and `navigationDestination` instead – Evgeny K Nov 27 '22 at 07:12
how to handle multiple event ? in my case, another text onClickEvent (AKA TrendingArtist ViewAll Text Click Listener). in navigationDestination(isPresented) is a single varible. How to handle multiple.? Thanks in advance – Aminul Haque Aome Dec 07 '22 at 12:47
1

@AminulHaqueAome you need to use `path` property then in your `NavigationStack` and use `navigationDestination(for:)`. You can take a look at this [article](https://swiftwithmajid.com/2022/06/21/mastering-navigationstack-in-swiftui-deep-linking/) – Evgeny K Dec 08 '22 at 11:18

in SwiftUI, Can't navigate from one screen to another screen using response from @State type datatype

1 Answers1