How to push a new view when a list row is tapped

Paul Hudson @twostraws September 3rd 2021

Updated for Xcode 14.0 beta 1

SwiftUI’s NavigationLink can be used inside list rows to present new views when a row is tapped. If the NavigationLink wraps around your entire row, the system automatically understands to make the entire row tappable in order to present the new view.

To demonstrate this, the following code creates a PlayerView that is able to show one selected football player’s name in large text. It then creates a List for several players, where each row in the list has a NavigationLink that passes in the name of the player that was tapped:

struct PlayerView: View {
    let name: String

    var body: some View {
        Text("Selected player: \(name)")
            .font(.largeTitle)
    }
}

struct ContentView: View {
    let players = [
        "Roy Kent",
        "Richard Montlaur",
        "Dani Rojas",
        "Jamie Tartt",
    ]

    var body: some View {
        NavigationView {
            List(players, id: \.self) { player in
                NavigationLink(destination: PlayerView(name: player)) {
                    Text(player)
                }
            }
            .navigationTitle("Select a player")
        }
    }
}

Download this as an Xcode project