NavigationLink in iOS Swift - Mini App: Build & Ship

Build: Home Screen

This screen shows a list of items. When you tap an item, it navigates to a detail screen showing the item name.

Target UI

Home Screen
----------------
| Item 1       |
| Item 2       |
| Item 3       |
----------------

Tap an item to see details.

Use NavigationLink to navigate from the list to a detail screen.

The detail screen must display the selected item's name.

Use a NavigationView to enable navigation.

Display a list of three items: Item 1, Item 2, Item 3.

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                // TODO: Add NavigationLinks here
            }
            .navigationTitle("Home Screen")
        }
    }
}

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

struct DetailView: View {
    var itemName: String
    var body: some View {
        Text(itemName)
            .font(.largeTitle)
            .navigationTitle("Detail")
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                NavigationLink(destination: DetailView(itemName: item)) {
                    Text(item)
                }
            }
            .navigationTitle("Home Screen")
        }
    }
}

struct DetailView: View {
    var itemName: String
    var body: some View {
        Text(itemName)
            .font(.largeTitle)
            .navigationTitle("Detail")
    }
}

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

We use a NavigationView to enable navigation in the app. Inside it, a List shows three items. Each item is wrapped in a NavigationLink that points to DetailView, passing the item name. When the user taps an item, the app navigates to the detail screen showing the selected item name. The navigationTitle sets the title for each screen.

Final Result

Completed Screen

Home Screen
----------------
| Item 1       |
| Item 2       |
| Item 3       |
----------------

User taps "Item 2"

Detail Screen
----------------
|    Item 2    |
----------------

User taps on an item in the list.

App navigates to the detail screen showing the tapped item's name.

User can swipe back or tap back button to return to Home Screen.

Stretch Goal

Add a button on the Home Screen navigation bar that shows an alert with a welcome message.

💡 Hint

Use the .toolbar modifier with a Button and .alert modifier on the view.