SwiftUI NavigationStack

Here, we will see the new way of doing navigation in SwiftUI. With newer version of iOS update, we will use NavigationStack instead of NavigationView.

To work with NavigationStack, in general we will need the below things

1. NavigationStack
2. NavigationLink
3. navigationDestination

NavigationStack view should be inside HStack or VStack inside some View. And then inside NavigationStack you may need to insert NavigationLink.

Here we will use Text() view inside NavigationLink as our destination view. To go to the destination link we need to use the label and put Text() view inside the label

struct NavView: View{
    var body:some View{
        VStack{
            NavigationStack{
                NavigationLink{
                    Text("Hello")
                }label: {
                    Text("go there")
                }
            }
        }
    }
}

The above code should clarify what I have said so far. And that's the simplest form of NavigationStack.

A little more advanced NavigationStack could involve List container. If you have a lot of items to show then and then navigate to a new view then we will use List container.

See how we used Hashable with struct to make it comparable with two objects of it's own.

struct MyPlaces: Identifiable, Hashable {
    let id = UUID()
    let place : String
    let price : Int
    let image : String
}

extension MyPlaces {
    static var dummyData: [MyPlaces] {
        return [
            .init(place: "Rocks", price: 79, image: "welcome-one"),
            .init(place: "River", price: 39, image: "welcome-two"),
            .init(place: "Mountain", price: 59, image: "welcome-three")
        ]
    }
}

extention MyPlaces returns a list of MyPlaces objects. Now this list could be used for navigation. We put NavigationLink inside the List container to make each item clickable.

NavigationStack, List conainer and NavigationLink would together make a clickable link. Eventhough it's clickable, but you wont able to go anywhere, that's why we need to add navigationDestination function to it.navigationDestination takes Hashable list.

We already made our list Hshable by extending Hsahable proctocol with MyPlaces.

struct NavView:View{
    var body: some View{
        NavigationStack {
                    List(MyPlaces.dummyData) { item in
                        NavigationLink(item.place, value: item)
                    }
                        .listStyle(.plain)
                        .navigationDestination(for: MyPlaces.self) { item in
                        Text(item.place)
                                
                            .font(.largeTitle)
                            .bold()
                        Text("\(item.price)$")
                        Image(item.image)
                            .resizable()
                            .frame(width: .infinity)
                            .ignoresSafeArea()
                            
                        
                    }
                        .navigationTitle("Go Places")
        }
    }
}

navigationDestination works like a loop, It goes through MyPlaces list and attaches with the List container. 

And also see navigationTitle which comes at the very end of NavigationStack. It just puts a title for the whole view.

Comment