NavigationLink isActive deprecated

Question

In the new version of iOS and Xcode

NavigationLink(isActive: , destination: , label: ) 

is deprecated.

How do we control the status of NavigationLink then?

Answer 1

Old/Deprecated way to navigate:

    @State private var readyToNavigate : Bool = false

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: MyTargetView(), isActive: $readyToNavigate, label: {Text("Navigate Link")})
                
                Button {
                    //Code here before changing the bool value
                    readyToNavigate = true
                } label: {
                    Text("Navigate Button")
                }
            }
            .navigationTitle("Navigation")
        }
    }

New way to navigate - note that this is using NavigationStack instead of NavigationView:

    @State private var readyToNavigate : Bool = false

    var body: some View {
        NavigationStack {
           VStack {
              Button {
                  //Code here before changing the bool value
                  readyToNavigate = true
              } label: {
                  Text("Navigate Button")
              }
          }
           .navigationTitle("Navigation")
           .navigationDestination(isPresented: $readyToNavigate) {
              MyTargetView()
          }
       }
   }

Answer 2

Check out Apple's migration docs:

https://developer.apple.com/documentation/swiftui/migrating-to-new-navigation-types

Answer 3

Use new NavigationLink(value:label:) as specified. By putting corresponding value into NavigationPath you activate a link.

See more for example in this topic

Answer 4

The isActive implementation of NavigationLink is deprecated in iOS 16. Instead, you should use the new NavigationLink(value:) along with .navigationDestination with NavigationStack.

Answer 5

in iOS16 and above

The new programmatic way to do navigation is extremely powerful! Much better than the old one.
The new way is using the NavigationStack(path:root).
The path parameter is a Binding to a NavigationPath. ex.

@State private var path = NavigationPath()
    var body: some View {
        NavigationStack(path: $path) {
           ...
    }

Lets create two structs to illustrate how this works.

struct Fruit: Hashable,Identifiable {
    let id = UUID()
    var name: String
    var number: Int
    static var sample = [Fruit(name: "Apple", number: 2), Fruit(name: "Cherry", number: 3)]
}

struct Vegetable: Hashable,Identifiable {
    let id = UUID()
    var name: String
    var number: Int
    static var sample = [Vegetable(name: "Carrot", number: 2), Vegetable(name: "Zucchini", number: 3)]
}

The new navigation style is data driven.
Here I create the label and link... NavigationLink(value:label:)
But the destination will be different if I have a fruit or a veg.

 .navigationDestination(for: Fruit.self) { fruit in
     VStack {
     ...
     }

So if I have a Vegetable or a Fruit model, depending of the data type selected in the link, the navigation destination will be different and it will present different views.

So let's put this in the NavigationStack. Lets start with the NavigationLink:

Form {
    Section("Fruits") {
       ForEach(Fruit.sample) { fruit in
          NavigationLink(value: fruit) {
               HStack {
                 Text("\(fruit.number)")
                 Text(fruit.name)
               }
           }
       }
    }
    Section("Veggies") {
        ForEach(Vegetable.sample) { fruit in
           NavigationLink(value: fruit) {
                 HStack {
                   Text("\(fruit.number)")
                   Text(fruit.name)
                 }
             }
           }
         }
     }

Now the NavigationDestination gonna look like this:

 .navigationDestination(for: Fruit.self) { fruit in
     VStack {
         Text(fruit.name)
         HStack{
             let count = path.count
             Text("level: \(count)")
         }
         Form {
             Section("Veggies") {
                 ForEach(Vegetable.sample) { veg in
                     NavigationLink(value: veg) {
                         HStack {
                             Text("\(veg.number)")
                             Text(veg.name)
                         }
                     }
                 }
             }
         }
         Button("Unwind") {
             path.removeLast(path.count)
         }
     }

and below add again the same but for veggies like:

.navigationDestination(for: Vegetable.self) { veg in
         VStack {
                   ...
}

Now you can navigate from list to list and the app will show you how many level deep you are depending of how many items are collected in the path. Then you can unwind. This will reset the path property to empty and the start page will be shown again!

The screen will look like this... and the unwind button

and navigating...

I hope this helps!