SwiftUI - NavigationLink is not working with a button

Question

I am making an app where I take two number inputs and want to show the addition result of the numbers in the second screen, when a button is clicked. I can print the result in the console, but unfortunately it seems like navigation link is not working, around the button. If I put NavigationLink around the button label instead of around the whole button, then, it goes to the second screen but button action stops working. Here is my code:

import SwiftUI

struct ContentView: View {
    @State private var number1 : String = ""
    @State private var number2: String = ""
    @State private var isTapped:Bool = false
    @State var sum : Double = 0
    var body: some View {
        
        NavigationView {
            VStack{
                TextField("Type first number", text: $number1)
                    .keyboardType(.numberPad).padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .background(Color.gray).border(Color.blue,width:5)
                
                TextField("Type second number", text: $number2)
                    .keyboardType(.numberPad).padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .background(Color.gray).border(Color.blue,width:5)
                
                
                //this Navigationlink is not working
                NavigationLink(destination: Text("\(self.sum)")) {
                    Button(action: {
                        print("I am here in the action")
                        self.isTapped.toggle()
                        UIApplication.shared.endEditing()
                        if let num1 = Double(self.number1), let num2 = Double(self.number2){
                            print("I am here")
                            self.sum = num1 + num2
                            print("\(self.sum)")
                        }
                    }) {
                        //If I put the Navigationlink here, button action stop working.
                        Text("Add Two Numbers")
                            .padding()
                            .foregroundColor(.blue)
                            .background( isTapped ? Color.orange : Color.gray)
                            .font(.title)
                            .border(Color.blue, width: 5)
                            .shadow(radius: 10)
                        
                    }
                    
                }
                
            }
            
        }
        
    }
}
extension UIApplication {
    func endEditing() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Any clue? Thanks for your curiosity.

Asperi Asperi · Accepted Answer · 2020-09-11T03:46:00

NavigationLink is itself a button, actually, so you introduce some kind of conflict. Instead you can use link just with additional tap gesture handler, like

NavigationLink(destination: Text("\(self.sum)")) {
    Text("Add Two Numbers")
        .padding()
        .foregroundColor(.blue)
        .background(isTapped ? Color.orange : Color.gray)
        .font(.title)
        .border(Color.blue, width: 5)
        .shadow(radius: 10)
    }
    .simultaneousGesture(TapGesture().onEnded{
        print("I am here in the action")
        self.isTapped.toggle()
        UIApplication.shared.endEditing()
        if let num1 = Double(self.number1), let num2 = Double(self.number2){
            print("I am here")
            self.sum = num1 + num2
            print("\(self.sum)")
        }
    })

SwiftUI - NavigationLink is not working with a button

1 Answers