NavigationStack in iOS Swift - Mini App: Build & Ship

Build: Simple NavigationStack Example

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

Target UI

---------------------
| Simple Navigation |
|-------------------|
| > Item 1          |
| > Item 2          |
| > Item 3          |
|                   |
---------------------

Use NavigationStack as the root navigation container

Show a list of three items labeled 'Item 1', 'Item 2', and 'Item 3'

When an item is tapped, navigate to a detail screen

Detail screen shows the tapped item's name in large text

Add a back button to return to the list

Starter Code

iOS Swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        // TODO: Add NavigationStack and list here
        Text("Hello, World!")
    }
}

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

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        NavigationStack {
            List(items, id: \.self) { item in
                NavigationLink(value: item) {
                    Text(item)
                }
            }
            .navigationTitle("Simple Navigation")
            .navigationDestination(for: String.self) { item in
                DetailView(itemName: item)
            }
        }
    }
}

struct DetailView: View {
    let itemName: String

    var body: some View {
        Text(itemName)
            .font(.largeTitle)
            .navigationTitle(itemName)
            .navigationBarTitleDisplayMode(.inline)
    }
}

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

We use NavigationStack as the root container to manage navigation. Inside it, a List shows three items. Each item is a NavigationLink that, when tapped, pushes a DetailView onto the stack. The detail view displays the selected item's name in large text and sets the navigation bar title. The back button is automatically provided by NavigationStack to return to the list.

Final Result

Completed Screen

---------------------
| Simple Navigation |
|-------------------|
| > Item 1          |
| > Item 2          |
| > Item 3          |
|                   |
---------------------

-- After tapping 'Item 2' --
---------------------
| Item 2            |
|-------------------|
|                   |
|     Item 2        |
|                   |
|                   |
---------------------

Tap on any item in the list to navigate to the detail screen showing that item's name

Use the back button in the navigation bar to return to the list

Stretch Goal

Add a button on the list screen that navigates to a new screen showing a welcome message.

💡 Hint

Add a toolbar button inside NavigationStack using .toolbar modifier with a NavigationLink to a new view.