'init(destination:isActive:label:)' was deprecated in iOS 16.0: use NavigationLink(value:label:) inside a NavigationStack or NavigationSplitView

Question

I have tried different iterations of examples posted on this site but nothing is going right.

I have also tried following the examples listed here:

Navigation to new navigation types:

I am getting the warning in this posts' title for deprecation of NavigationLink(destination:isActive)

struct PhoneLogin: View {
    @StateObject var phoneLoginData = PhoneLoginViewModel()
    @State var isSmall = UIScreen.main.bounds.height < 750
    
    var body: some View {
        VStack {
            VStack {
                Text("Continue With Phone")
                    .font(.title2)
                    .fontWeight(.bold)
                    .foregroundColor(.black)
                    .padding()
                
                Image("phone_logo")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
                
                Text("You'll receive a 4-digit code \n to verify next")
                    .font(isSmall ? .none : .title2)
                    .foregroundColor(.gray)
                    .multilineTextAlignment(.center)
                    .padding()
                
                // Mobile Number Field . . . . .
                
                HStack {
                    VStack(alignment: .leading, spacing: 6) {
                        Text("Enter Your Number")
                            .font(.caption)
                            .foregroundColor(.gray)
                        
                        Text("+ \(phoneLoginData.getCountryCode()) \(phoneLoginData.phNo)")
                            .font(.title2)
                            .fontWeight(.bold)
                            .foregroundColor(.black)
                    }
                    
                    Spacer(minLength: 0)

                    NavigationLink(
                        destination: Verification(phoneLoginData: phoneLoginData), isActive: $phoneLoginData.goToVerify) {
                        
                        Text("")
                            .hidden()
                    }
                    
                    Button(action: phoneLoginData.sendCode, label: {
                        Text("Continue")
                            .foregroundColor(.black)
                            .padding(.vertical, 18)
                            .padding(.horizontal, 38)
                            .background(Color.yellow)
                            .cornerRadius(15)
                    })
                    
                    .disabled(phoneLoginData.phNo == "" ? true : false)
                }
                .padding()
                .background(Color.white)
                .cornerRadius(20)
                .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: -5)
            }
            .frame(height: UIScreen.main.bounds.height / 1.8)
            .background(Color.white)
            .cornerRadius(20)
            
            // Custom Number Pad
            CustomNumberPad(value: $phoneLoginData.phNo, isVerify: false)
        }
        .background(Color("bg").ignoresSafeArea(.all, edges: .bottom))
    }
}

Ashby

Answer 1

I finally figured it out:

REPLACED:

NavigationLink(
     destination: Verification(phoneLoginData: phoneLoginData), 
     isActive: $phoneLoginData.goToVerify) {
          Text("")
               .hidden()
     }

WITH:

Making sure the below code is placed anywhere inside a NavigationStack (ios 16):

.navigationDestination(
     isPresented: $phoneLoginData.goToVerify) {
          Verification(phoneLoginData: phoneLoginData)
          Text("")
              .hidden()
     }

Ashby

Note that the Text("").hidden() is not necessary, that will add a weird black bottom area on the app – Hodden

Also it seems to be required to upgrade from NavigationView to NavigationStack. This might lead lead to other refactoring requirements – Misname

@Ashby can you elaborate on what you mean when you say "anywhere inside a NavigationStack"? I'm still struggling to make this work. – Audile

@Audile To clarify, .navigationDestination code can be placed inside a NavigationStack in relation to where your code is. Mine was placed in the same spot as the NavigationLink was placed, just replaced the NavigationLink with '.navigationDestination( isPresented: $phoneLoginData.goToVerify) { Verification(phoneLoginData: phoneLoginData) Text("") .hidden() }' – Ashby