NavigationStack & NavigationLink in SwiftUI

by

NavigationStack

NavigationStack helps to navigate between multiple views, shows titles in views, and enables a navigation bar on the top for us. Here is a simple example: 

 NavigationStack {
            Text("Hello, Hello!")
                .navigationTitle("App title")
        }

Output will be like this:

NavigationLink

NavigationLink uses to link another view to the root view. If we visit the child view, NavigationStack will automatically add a Back button for us. Here is an example code of NavigationLink in SwiftUI:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack{
            NavigationLink("Go to 2nd page") {
                Text("Details page")
            }
        }
    }
}
#Preview {
    ContentView()
}

When we create NavigationLink, we can set the destination. Here, we can pass any view we like. For this example, we set a simple Text view. And we can customize the link as we want. For now, we have keep this simple and used only a Text view.

Here is the output:

We can set the title for both the root view and the child view:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack{
            NavigationLink("Go to 2nd page") {
                Text("Details page")
                    .navigationTitle("Details page")
            }
            .navigationTitle("My Awesome App")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}
#Preview {
    ContentView()
}

.navigationBarTitleDisplayMode(.inline) control title display mode. Here is the output:

Inside NavigationLink, we can add any custom view. In this example, we have used one text view and one image view. Also for the NavigationLink label, we can use any custom view too. Here is another example:

    NavigationLink {
                Text("Details view")
                Image(systemName: "globe")
            } label: {
                Label("Go to 2nd view", systemImage: "arrow.right")
            }

Now let’s create a dynamic app with NavigationStack:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack{
            
            List(1...100, id: \.self){ item in
                NavigationLink(
                    destination: DetailsView(item: item)
                ) {
                    Label("Go to detail of **\(item)**", systemImage: "arrow.right.square.fill")
                }
            }
            .navigationTitle("My Awesome App")
            .navigationBarTitleDisplayMode(.inline)
            
        }
    }
}

struct DetailsView: View {
    
    var item:Int
    
    var body: some View {
        
        VStack{
            
            Text("Detail page of item **\(item)**.")
                .font(.largeTitle)
                .padding(100)
                .background(.blue)
                .clipShape(Circle())
                .foregroundColor(.white)
            
        }
        .navigationTitle("\(item)")
    }
}
#Preview {
    ContentView()
}

We made a custom view for the details page. Here is the output:

See, how easy we can develop a dynamic app in SwiftUI? If you like this article, please share it with your network.

More about NavigationStack:

Leave a Reply