Navigate to another view on button click in SwiftUI

In this tutorial, we will see how to navigate to another view on a button click in SwiftUI.

We can navigate to another view on button click by using the NavigationView and NavigationLink. We can use the NavigationView to create a navigation bar and manage the navigation stack, and using the NavigationLink we can create a button that will navigate to another view when we tap that button.

The NavigationLink takes a destination parameter, which specifies the view to navigate.

Different views in a single file

We can define multiple views in a single file in SwiftUI. Below is an example with two views, ContentView and AnotherView, in a single file.

Now, follow the steps below to achieve this task.

Creating the first view (ContentView)

First of all, in the ContentView, I will create a simple navigation view with a navigation link. This is our main view from where we want to navigate to other views.

Example

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: AnotherView()) {
                    Text("Go to Another View")
                }
            }
            .navigationTitle("First View")
        }
    }
}

In the above program, I have used the NavigationLink to create a navigation link. So, when we tap on the text inside the link, it will navigate to the view specified in the destination parameter.

Here, I have specified the AnotherView() to the destination parameter. So, it will navigate to the AnotherView() that I will create below.

Creating the AnotherView()

Now, I will create a view called AnotherView that will display a simple text. So, when we navigate to this view it will display a simple text. This is the view where we want to navigate.

Example

struct AnotherView: View {
    var body: some View {
        Text("This is the Another View")
            .navigationTitle("Another View")
    }
}

The above code will display a simple text that is “This is the Another View“.

Here is the complete code below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: AnotherView()) {
                    Text("Go to Another View")
                }
            }
            .navigationTitle("First View")
        }
    }
}

struct AnotherView: View {
    var body: some View {
        Text("This is the Another View")
            .navigationTitle("Another View")
    }
}

The above code will navigate to AnotherView() when we tap on the “Go to Another View” and display the text “This is the Another View“.

Output:

Create different files for different views

We can also create two different files, ContentView and AnotherView for those two views. It is a good practice to create different views into separate files for better code organization.

The file structure will be like below.

Now, have a look at the code for the different files below.

ContentView

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: AnotherView()) {
                    Text("Go to Another View")
                }
            }
            .navigationTitle("First View")
        }
    }
}

AnotherView

import SwiftUI

struct AnotherView: View {
    var body: some View {
        Text("This is the Another View")
            .navigationTitle("Another View")
    }
}

The output will be the same as above.