NavigationView and NavigationLink on button click in SwiftUI?

Question

I am trying to push from login view to detail view but not able to make it.even navigation bar is not showing in login view. How to push on button click in SwiftUI? How to use NavigationLink on button click?

var body: some View {          NavigationView {         VStack(alignment: .leading) {             Text("Let's get you signed in.")                 .bold()                 .font(.system(size: 40))                 .multilineTextAlignment(.leading)                 .frame(width: 300, height: 100, alignment: .topLeading)                 .padding(Edge.Set.bottom, 50)                          Text("Email address:")                 .font(.headline)             TextField("Email", text: $email)                 .frame(height:44)                 .accentColor(Color.white)                 .background(Color(UIColor.darkGray))                 .cornerRadius(4.0)                          Text("Password:")                 .font(.headline)                          SecureField("Password", text: $password)                 .frame(height:44)                 .accentColor(Color.white)                 .background(Color(UIColor.darkGray))                 .cornerRadius(4.0)                          Button(action: {                 print("login tapped")             }) {                 HStack {                     Spacer()                     Text("Login").foregroundColor(Color.white).bold()                     Spacer()                 }             }             .accentColor(Color.black)             .padding()             .background(Color(UIColor.darkGray))             .cornerRadius(4.0)             .padding(Edge.Set.vertical, 20)         }         .padding(.horizontal,30)     }     .navigationBarTitle(Text("Login")) } 

Answer 1

To fix your issue you need to bind and manage tag with NavigationLink, So create one state inside you view as follow, just add above body.

@State var selection: Int? = nil 

Then update your button code as follow to add NavigationLink

NavigationLink(destination: Text("Test"), tag: 1, selection: $selection) {     Button(action: {         print("login tapped")         self.selection = 1     }) {         HStack {             Spacer()             Text("Login").foregroundColor(Color.white).bold()             Spacer()         }     }     .accentColor(Color.black)     .padding()     .background(Color(UIColor.darkGray))     .cornerRadius(4.0)     .padding(Edge.Set.vertical, 20) } 

Meaning is, when selection and NavigationLink tag value will match then navigation will be occurs.

I hope this will help you.

Answer 2

The accepted answer uses NavigationLink(destination:tag:selection:) which is correct.

However, for a simple view with just one NavigationLink you can use a simpler variant: NavigationLink(destination:isActive:)

---

Usage #1

NavigationLink is activated by a standard Button:

struct ContentView: View {     @State var isLinkActive = false      var body: some View {         NavigationView {             VStack(alignment: .leading) {                 ...                 NavigationLink(destination: Text("OtherView"), isActive: $isLinkActive) {                     Button(action: {                         self.isLinkActive = true                     }) {                         Text("Login")                     }                 }             }             .navigationBarTitle(Text("Login"))         }     } } 

---

Usage #2

NavigationLink is hidden and activated by a standard Button:

struct ContentView: View {     @State var isLinkActive = false      var body: some View {         NavigationView {             VStack(alignment: .leading) {                 ...                 Button(action: {                     self.isLinkActive = true                 }) {                     Text("Login")                 }             }             .navigationBarTitle(Text("Login"))             .background(                 NavigationLink(destination: Text("OtherView"), isActive: $isLinkActive) {                     EmptyView()                 }                 .hidden()             )         }     } } 

---

Usage #3

NavigationLink is hidden and activated programmatically:

struct ContentView: View {     @State var isLinkActive = false      var body: some View {         NavigationView {             VStack(alignment: .leading) {                 ...             }             .navigationBarTitle(Text("Login"))             .background(                 NavigationLink(destination: Text("OtherView"), isActive: $isLinkActive) {                     EmptyView()                 }                 .hidden()             )         }         .onAppear {             self.isLinkActive = true         }     } } 

---

_{Here is a GitHub repository with different SwiftUI extensions that makes navigation easier.}